add demo examples

JoanClaret · Jul 3, 2015 · 5a8cec2 · 5a8cec2
1 parent b35d192
commit 5a8cec2
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 7 deletions.
diff --git a/demo/css/styles.css b/demo/css/styles.css
@@ -77,7 +77,7 @@ section {
 
 .example {
     font-size: 22px;
-    font-family: oswald;
+
     overflow: hidden;
     padding: 0 15px;
 }

diff --git a/demo/img/4.jpg b/demo/img/4.jpg
diff --git a/demo/img/5.jpg b/demo/img/5.jpg
diff --git a/demo/img/6.jpg b/demo/img/6.jpg
diff --git a/demo/img/7.jpg b/demo/img/7.jpg
diff --git a/demo/img/8.jpg b/demo/img/8.jpg
diff --git a/demo/img/9.jpg b/demo/img/9.jpg
diff --git a/demo/index.html b/demo/index.html
@@ -54,6 +54,34 @@ <h2>Example 2:</h2>
                     </li>
                 </ul>
                 <!-- Slider end -->
+                <h2>Example 3:</h2>
+                <!-- Slider start -->
+                <ul class="jc-slider3">
+                    <li class="jc-animation">
+                        <img src="img/4.jpg" alt="1">
+                    </li>
+                    <li class="jc-animation">
+                        <img src="img/5.jpg" alt="2">
+                    </li>
+                    <li class="jc-animation">
+                        <img src="img/6.jpg" alt="3">
+                    </li>
+                </ul>
+                <!-- Slider end -->
+                <h2>Example 4:</h2>
+                <!-- Slider start -->
+                <ul class="jc-slider4">
+                    <li class="jc-animation">
+                        <img src="img/7.jpg" alt="1">
+                    </li>
+                    <li class="jc-animation">
+                        <img src="img/8.jpg" alt="2">
+                    </li>
+                    <li class="jc-animation">
+                        <img src="img/9.jpg" alt="3">
+                    </li>
+                </ul>
+                <!-- Slider end -->
             </section>
         </main>
 
@@ -75,6 +103,16 @@ <h2>Example 2:</h2>
                     animationOut: 'flipOutX',
                     stopOnHover: false
                 });
+                $('.jc-slider3').jcSlider({
+                    animationIn: 'flipInX',
+                    animationOut: 'shake',
+                    stopOnHover: false
+                });
+                $('.jc-slider4').jcSlider({
+                    animationIn: 'zoomIn',
+                    animationOut: 'zoomOut',
+                    stopOnHover: false
+                });
             });
         </script>
         <a href="https://github.com/joanclaret"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png"></a>

diff --git a/jquery.jcslider.js b/jquery.jcslider.js
@@ -48,12 +48,12 @@
             loop            : true
         }, options );
 
-        var animateOut = 'animated ' + settings.animationOut;
-        var animateIn =  'animated ' + settings.animationIn;
-        var animationItem = $this.find('.jc-animation');
-        var animationItemsLength = animationItem.length;
-        var animationCurrentItem = 0;
-        var jcSliderInterval = null;
+        var animateOut = 'animated ' + settings.animationOut,
+            animateIn =  'animated ' + settings.animationIn,
+            animationItem = $this.find('.jc-animation'),
+            animationItemsLength = animationItem.length,
+            animationCurrentItem = 0,
+            jcSliderInterval = null;
 
 
         // Detect when animations (keyframes) end