Added carousal for videos

_data/youtube.yaml

@@ -0,0 +1,20 @@
+---
+- title: Behind the scenes of Prelude'16
+  link: https://www.youtube.com/watch?v=lTo0HwzFOgU
+  tag: music
+
+- title: WORC - Election Reforms
+  link: "https://www.youtube.com/watch?v=YHoJ-z9zXlQ"
+  tag: politics
+
+- title: "IITR: Students protest against expulsion"
+  link: https://www.youtube.com/watch?v=OYG5_vCIDDg
+  tag: students
+
+- title: Behind the Scenes of Jashn'15 - Watch Out! News Agency & Cinematic Section
+  link: https://www.youtube.com/watch?v=uXOoygliTo8
+  tag: cinematics
+
+- title: The Making of 'Mantrimandal' and 'Ye Kaisa Swabhiman' - Watch Out! News Agency, IIT Roorkee
+  link: https://www.youtube.com/watch?v=3KtoxJBugdQ
+  tag: dramatics

index.html

@@ -55,18 +55,45 @@ title: "Home"
   </div>
 </div>
 
-  <div class="pagination">
-    {% if paginator.previous_page == 1 %}
-      <a href="/" class="previous"><img src="/images/left.png"></a>
-    {% elsif paginator.previous_page %}
-      <a href="/page/{{ paginator.previous_page }}" class="previous"><img src="/images/left.png"></a>
-    {% else %}
-      <span class="previous"><img src="/images/left.png" class="disabled"></span>
-    {% endif %}
-      <span class="page_number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
-    {% if paginator.next_page %}
-      <a href="/page/{{ paginator.next_page }}" class="next"><img src="/images/right.png"></a>
-    {% else %}
-      <span class="next "><img src="/images/right.png" class="disabled"></span>
-    {% endif %}
-  </div>
+  <!-- Carousel
+    ================================================== -->
+    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
+      <!-- Indicators -->
+      <ol class="carousel-indicators">
+        {% for video in site.data.youtube %}
+          <li data-target="#myCarousel" data-slide-to="{{ forloop.index0 }}" class="{% if forloop.first %}active{% endif %}"></li>
+        {% endfor %}
+        <!--
+        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
+        <li class="" data-target="#myCarousel" data-slide-to="1"></li>
+        <li class="" data-target="#myCarousel" data-slide-to="2"></li>
+        -->
+      </ol>
+      <div class="carousel-inner" role="listbox">
+        {% for video in site.data.youtube %}
+        <div class="item {% if forloop.first %}active{% endif %}">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>{{ video.title }}</h1>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      <a class="left carousel-control" href="#myCarousel" role="button"
+                                                          data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left"
+              aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="right carousel-control"
+         href="#myCarousel" role="button"
+                            data-slide="next">
+        <span class="glyphicon
+        glyphicon-chevron-right"
+              aria-hidden="true"></span>
+        <span
+              class="sr-only">Next</span>
+      </a>
+    </div><!-- /.carousel -->
+