From ec4dfab884361babc19409d7c26a9e48e62c3181 Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Tue, 28 May 2013 17:01:52 +0530
Subject: [PATCH] [slideshow] updated for bootstrap3

---
 website/css/website.css                       | 12 ++++++++
 .../website_slideshow/website_slideshow.txt   |  5 ++--
 website/templates/html/slideshow.html         | 30 ++++++++++++++-----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/website/css/website.css b/website/css/website.css
index ea88396a5d..36e306d5eb 100644
--- a/website/css/website.css
+++ b/website/css/website.css
@@ -97,3 +97,15 @@ h1, h2, h3, h4, h5 {
 .avatar-x-large img {
 	width: 100px; 
 }
+
+.carousel-control .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 5;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+}
diff --git a/website/doctype/website_slideshow/website_slideshow.txt b/website/doctype/website_slideshow/website_slideshow.txt
index 2887d4b464..e67e1f8ca1 100644
--- a/website/doctype/website_slideshow/website_slideshow.txt
+++ b/website/doctype/website_slideshow/website_slideshow.txt
@@ -1,8 +1,8 @@
 [
  {
-  "creation": "2013-03-07 14:48:40", 
+  "creation": "2013-03-07 15:53:15", 
   "docstatus": 0, 
-  "modified": "2012-12-25 16:56:34", 
+  "modified": "2013-05-28 16:57:32", 
   "modified_by": "Administrator", 
   "owner": "Administrator"
  }, 
@@ -53,6 +53,7 @@
  }, 
  {
   "depends_on": "eval:!doc.__islocal", 
+  "description": "Note: For best results, images must be of the same size and width must be greater than height.", 
   "doctype": "DocField", 
   "fieldname": "sb0", 
   "fieldtype": "Section Break", 
diff --git a/website/templates/html/slideshow.html b/website/templates/html/slideshow.html
index b26338c5e5..b148cb1ce8 100644
--- a/website/templates/html/slideshow.html
+++ b/website/templates/html/slideshow.html
@@ -1,6 +1,17 @@
 {% if slideshow %}
 {{ slideshow_header }}
-<div id="myCarousel" class="carousel slide">
+
+
+<div id="the-carousel" class="carousel slide">
+	<!-- Indicators -->
+	<ol class="carousel-indicators">
+		{% for slide in obj.slides %}
+			<li data-target="#the-carousel" data-slide-to="0" 
+				{%- if loop.index==0 %}class="active"{% endif %}></li>
+		{% endfor %}
+	</ol>
+	
+	<!-- Wrapper for slides -->
 	<div class="carousel-inner">
 		{% for slide in obj.slides %}
 		<div class="{% if slide.idx==1 %}active {% endif %}item">
@@ -14,10 +25,15 @@
 		</div>
 		{% endfor %}
 	</div>
-	<a class="carousel-control left" href="#myCarousel"
-		data-slide="prev">&lsaquo;</a>
-	<a class="carousel-control right" href="#myCarousel" 
-		data-slide="next">&rsaquo;</a>
-	</div>
-	<script>$(".carousel").carousel();</script>
+
+	<!-- Controls -->
+	<a class="left carousel-control" href="#the-carousel" data-slide="prev">
+		<span class="icon icon-chevron-left"></span>
+	</a>
+	<a class="right carousel-control" href="#the-carousel" data-slide="next">
+		<span class="icon icon-chevron-right"></span>
+	</a>
+</div>
+
+<script>$(".carousel").carousel();</script>
 {% endif %}