[FEATURE] Make the slider autoslide (Podio Feature_41) (#18)

t3kit · Nov 30, 2016 · 1fdccea · 1fdccea
1 parent eafaad6
commit 1fdccea
Showing 1 changed file with 28 additions and 24 deletions.
diff --git a/dev/js/main/contentElements/slider.js b/dev/js/main/contentElements/slider.js
@@ -7,32 +7,36 @@
 
         // initialize swiper when document ready
         // http://idangero.us/swiper/api/
-        var swiper = new Swiper('.js__img-slider', {
-            nextButton: '.js__img-slider__btn-next',
-            prevButton: '.js__img-slider__btn-prev',
-            pagination: '.js__img-slider__pagination',
-            paginationClickable: true,
-            preloadImages: false,
-            lazyLoading: true,
-            watchSlidesVisibility: true,
-            lazyLoadingInPrevNext: true,
-            speed: 600
-        });
-        // Makes it possible to skip between slider images if they have links, using the tab button
-        swiper.container.on('focus', 'a', function(e) {
-            //Index of focused slide
-            var focusIndex = $(e.target).parents('.swiper-slide').index();
-            //Reset scrollLeft set by browser on focus
-            swiper.container.scrollLeft(0);
+        var $elem = $('.js__img-slider');
+        $elem.each(function() {
+            var time = $(this).attr('data-autoplay');
+            var slider = new Swiper($(this), {
+                nextButton: '.js__img-slider__btn-next',
+                prevButton: '.js__img-slider__btn-prev',
+                pagination: '.js__img-slider__pagination',
+                paginationClickable: true,
+                preloadImages: false,
+                lazyLoading: true,
+                watchSlidesVisibility: true,
+                lazyLoadingInPrevNext: true,
+                speed: 600,
+                autoplay: time
+            });
+            // Makes it possible to skip between slider images if they have links, using the tab button
+            slider.container.on('focus', 'a', function(e) {
+                //Index of focused slide
+                var focusIndex = $(e.target).parents('.swiper-slide').index();
+                //Reset scrollLeft set by browser on focus
+                slider.container.scrollLeft(0);
 
-            // IE fix
-            setTimeout(function() {
-                swiper.container.scrollLeft(0);
-            }, 0);
+                // IE fix
+                setTimeout(function() {
+                    slider.container.scrollLeft(0);
+                }, 0);
 
-            //Slide to focused slide
-            swiper.slideTo(focusIndex);
+                //Slide to focused slide
+                slider.slideTo(focusIndex);
+            });
         });
     });
-
 })(jQuery);