Adding Fade

README.markdown

@@ -25,6 +25,8 @@ draggable: true | false - (default:  true) - Enables desktop dragging
 
 easing: string - (default:  'linear') - animate() easing
 
+fade: true | false - (default: false) - Enables fade
+
 arrows: true | false - (default: true) - Next/Prev arrows
 
 infinite: true | false - (default: true) - Infinite looping

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "slick-carousel",
   "main": "slick.js",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "homepage": "https://github.com/kenwheeler/slick",
   "authors": [
     "Ken Wheeler <[email protected]>"

css/slick.css

@@ -9,6 +9,7 @@
 .slick-slide { float: left; height: 100%; min-height: 1px; }
 .slick-slide img { display: block; }
 .slick-slide { display: none; }
+.slick-slide img { pointer-events: none; }
 .slick-initialized .slick-slide { display: table-cell; }
 
 /* Loading States */
@@ -46,7 +47,7 @@
 
 /* Dots */
 
-.slick-dots { position: absolute; top: 90%; list-style: none; display: block; text-align: center; padding: 0px; width: 100%;}
+.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%;}
 .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; }
 .slick-dots li a { display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; }
 .slick-dots li a:before { content: '\8226'; font-family: "slick"; font-size: 6px; line-height: 2; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

css/style.css

@@ -153,6 +153,9 @@ td {
     padding: 10px;
     border: 1px solid #fff;
     width: 33%}
+a {
+    color: #3498db;
+}
 .button.first {
     margin-top:  40px;
 }
@@ -171,6 +174,16 @@ td {
   padding: 0px 20px 20px;
 }
 
+.slick-slide img {
+    width: 100%;
+    display: block;
+    border: 5px solid white;
+}
+
+.slick-slide .image {
+    padding: 10px;
+}
+
 .buttons::after  {
      content:  "";
      display:  table;
@@ -189,6 +202,10 @@ td {
   color: #3498db;
 }
 
+#disqus_thread {
+    margin-top: 20px;
+}
+
 @media only screen and (min-width:769px) {
     .content {
     width: 600px;

index.html

@@ -35,6 +35,8 @@ <h2>Features</h2>
 					<li>Swipe enabled. Or disabled, if you prefer.</li>
 					<li>Desktop mouse dragging</li>
 					<li>Infinite looping.</li>
+					<li>Fully accessible with arrow key navigation</li>
+					<li>Add, remove, filter & unfilter slides</li>
 					<li>Autoplay, dots, arrows, callbacks, etc...</li>
 				</ul>
 				<hr/>
@@ -166,6 +168,22 @@ <h2>Autoplay</h2>
   slidesToScroll: 1,
   autoplay: true,
   autoplaySpeed: 2000,
+});
+				</code></pre>
+				<hr/>
+				<h2>Fade</h2>
+				<div class="slider fade">
+					<div class="multiple"><div class="image"><img src="img/fonz1.png"/></div></div>
+					<div class="multiple"><div class="image"><img src="img/fonz2.png"/></div></div>
+					<div class="multiple"><div class="image"><img src="img/fonz3.png"/></div></div>
+				</div>
+			<pre><code>
+$('.fade').slick({
+  fade: true,
+  speed: 1000,
+  dots: true,
+  infinite: true,
+  slide: '.multiple'
 });
 				</code></pre>
 				<hr/>
@@ -283,6 +301,11 @@ <h2>Settings</h2>
 						</tr>
 					</thead>
 					<tbody>
+						<tr>
+							<td>accessibility</td>
+							<td>boolean, default: true</td>
+							<td>Enables tabbing and arrow key navigation</td>
+						</tr>
 						<tr>
 							<td>autoplay</td>
 							<td>boolean, default: false</td>
@@ -298,6 +321,11 @@ <h2>Settings</h2>
 							<td>boolean, default: true</td>
 							<td>Prev/Next Arrows</td>
 						</tr>
+						<tr>
+							<td>cssEase</td>
+							<td>string, default: 'ease'</td>
+							<td>CSS3 Animation Easing</td>
+						</tr>
 						<tr>
 							<td>dots</td>
 							<td>boolean, default: false</td>
@@ -308,6 +336,11 @@ <h2>Settings</h2>
 							<td>boolean, default: true</td>
 							<td>Enable mouse dragging</td>
 						</tr>
+						<tr>
+							<td>fade</td>
+							<td>boolean, default: false</td>
+							<td>Enable fade</td>
+						</tr>
 						<tr>
 							<td>easing</td>
 							<td>string, default: 'linear'</td>
@@ -445,13 +478,27 @@ <h2>Methods</h2>
 				<h2>Go Get It</h2>
 				<a class="button first" href="https://github.com/kenwheeler/slick/archive/master.zip">Download Now</a>
 				<a class="button last" href="https://github.com/kenwheeler/slick/">View On Github</a>
+				<hr/>
+				<div id="disqus_thread"></div>
 			</div>
 		</section>
 
 		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 		<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
 		<script type="text/javascript" src="js/slick.js"></script>
 		<script type="text/javascript" src="js/scripts.js"></script>
+
 		<script>hljs.initHighlightingOnLoad();</script>
+
+		<script type="text/javascript">
+        var disqus_shortname = 'slickcarousel';
+
+        (function() {
+            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+        })();
+    </script>
+
 </body>
-</html>
+</html>

js/scripts.js

@@ -71,6 +71,14 @@ $(document).ready(function(){
     autoplaySpeed: 2000
   });
 
+  $('.fade').slick({
+    dots: true,
+    infinite: true,
+    speed: 1000,
+    fade: true,
+    slide: '.multiple'
+  });
+
   $('.add-remove').slick({
     dots: true,
     slidesToShow: 3,