IIIT-ECell · GaurangTandon · Oct 1, 2018
diff --git a/_includes/carousel-script.html b/_includes/carousel-script.html
@@ -0,0 +1,16 @@
+<link rel="stylesheet" href="../slick/slick.min.css">
+<link rel="stylesheet" href="../slick/slick-theme.min.css">
+<script src="../slick/slick.min.js"></script>
+<script>
+    document.onreadystatechange = function(){
+        if(document.readyState === "complete"){
+            $(".carousel").slick({
+                adaptiveHeight: false,
+                autoplay: true,
+                autoplaySpeed: 1000,
+                dots: true,
+                draggable: true
+            });
+        }
+    };
+</script>
diff --git a/_includes/eventlbody.html b/_includes/eventlbody.html
@@ -1,4 +1,4 @@
-<div class="card col-sm-6 md-6">
+<div >
   {% if post.img %}
   <img class="card-img-top" src="{{site.baseurl}}/assets/eventsimages/{{post.img}}" alt="{{post.title}}">
   {% endif %}

diff --git a/_layouts/hackathons.html b/_layouts/hackathons.html
@@ -4,13 +4,10 @@
 permalink: /hackathons/
 ---
 
-<div class="row">
+<div class="row carousel">
   {% for post in site.posts %}
   	{% if post.categories contains "hackathons" %}
-
     	{% include eventlbody.html %}
-
   	{% endif %}
-  	<br>
   {% endfor %}
-</div>
+</div>
diff --git a/_layouts/talks.html b/_layouts/talks.html
@@ -2,14 +2,11 @@
 layout: page
 ---
 
-<div class="row">
-
+<div class="row carousel">
 	{% for post in site.posts %}
 		{% if post.categories contains "talk_session" %}
-
 			{% include eventlbody.html %}
-
 		{% endif %}
-		<br>
 	{% endfor %}
 </div>
+
diff --git a/_layouts/workshops.html b/_layouts/workshops.html
@@ -4,14 +4,11 @@
 permalink: /workshops/
 ---
 
-<div class="row">
-
+<div class="row carousel">
 	{% for post in site.posts %}
 		{% if post.categories contains "workshops" %}
-
 			{% include eventlbody.html %}
-
 		{% endif %}
-		<br>
 	{% endfor %}
 </div>
+
diff --git a/_layouts/wrapper.html b/_layouts/wrapper.html
@@ -14,6 +14,12 @@
   {% include footer.html %}
 
   {% include js.html %}
+
+  {% if page.carousel == true %}
+      {% include carousel-script.html %}
+  {% endif %}
+
+
 </body>
 
 </html>
diff --git a/css/custom-bootstrap.css b/css/custom-bootstrap.css
@@ -870,3 +870,14 @@ pre {
 .transparent-banner {
     background-color: rgba(0, 0, 0, 0);
 }
+
+.carousel {
+    width: 50%;
+    margin: auto;
+    margin-top: 50px;
+}
+
+.slick-next::before,
+.slick-prev::before {
+    color: black !important;
+}
diff --git a/hackathons.md b/hackathons.md
@@ -1,5 +1,6 @@
 ---
 layout: hackathons
-title : Hackathons
-permalink : /hackathons/
+title: Hackathons
+permalink: /hackathons/
+carousel: true
 ---
diff --git a/slick/ajax-loader.gif b/slick/ajax-loader.gif
diff --git a/slick/fonts/slick.woff b/slick/fonts/slick.woff
diff --git a/slick/slick-theme.min.css b/slick/slick-theme.min.css
diff --git a/slick/slick-theme.min.css.map b/slick/slick-theme.min.css.map
diff --git a/slick/slick.min.css b/slick/slick.min.css
diff --git a/slick/slick.min.css.map b/slick/slick.min.css.map
diff --git a/slick/slick.min.js b/slick/slick.min.js
diff --git a/talks.md b/talks.md
@@ -1,5 +1,6 @@
 ---
 layout: talks
-title : Talk Sessions
-permalink : /talks/
+title: Talk Sessions
+permalink: /talks/
+carousel: true
 ---
diff --git a/workshops.md b/workshops.md
@@ -1,5 +1,6 @@
 ---
 layout: workshops
-title : Workshops
-permalink : /workshops/
+title: Workshops
+permalink: /workshops/
+carousel: true
 ---