New Thumbs component

hexitex · Sep 14, 2018 · ba0f8e6 · ba0f8e6
1 parent 6989049
commit ba0f8e6
Show file tree

Hide file tree

Showing 8 changed files with 264 additions and 32 deletions.
diff --git a/demos/300-thumbs-gallery.html b/demos/300-thumbs-gallery.html
@@ -45,7 +45,7 @@
       height: 100%;
       opacity: 0.4;
     }
-    .gallery-thumbs .swiper-slide-active {
+    .gallery-thumbs .swiper-slide-thumb-active {
       opacity: 1;
     }
 
@@ -90,23 +90,23 @@
 
   <!-- Initialize Swiper -->
   <script>
+    var galleryThumbs = new Swiper('.gallery-thumbs', {
+      spaceBetween: 10,
+      slidesPerView: 4,
+      freeMode: true,
+      watchSlidesVisibility: true,
+      watchSlidesProgress: true,
+    });
     var galleryTop = new Swiper('.gallery-top', {
       spaceBetween: 10,
       navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
       },
+      thumbs: {
+        swiper: galleryThumbs
+      }
     });
-    var galleryThumbs = new Swiper('.gallery-thumbs', {
-      spaceBetween: 10,
-      centeredSlides: true,
-      slidesPerView: 'auto',
-      touchRatio: 0.2,
-      slideToClickedSlide: true,
-    });
-    galleryTop.controller.control = galleryThumbs;
-    galleryThumbs.controller.control = galleryTop;
-
   </script>
 </body>
 </html>
diff --git a/demos/310-thumbs-gallery-loop.html b/demos/310-thumbs-gallery-loop.html
@@ -44,7 +44,7 @@
       height: 100%;
       opacity: 0.4;
     }
-    .gallery-thumbs .swiper-slide-active {
+    .gallery-thumbs .swiper-slide-thumb-active {
       opacity: 1;
     }
 
@@ -85,10 +85,18 @@
   </div>
 
   <!-- Swiper JS -->
-  <script src="../dist/js/swiper.js"></script>
+  <script src="../dist/js/swiper.min.js"></script>
 
   <!-- Initialize Swiper -->
   <script>
+    var galleryThumbs = new Swiper('.gallery-thumbs', {
+      spaceBetween: 10,
+      slidesPerView: 4,
+      loop: true,
+      loopedSlides: 5, //looped slides should be the same
+      watchSlidesVisibility: true,
+      watchSlidesProgress: true,
+    });
     var galleryTop = new Swiper('.gallery-top', {
       spaceBetween: 10,
       loop:true,
@@ -97,18 +105,10 @@
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
       },
+      thumbs: {
+        swiper: galleryThumbs,
+      },
     });
-    var galleryThumbs = new Swiper('.gallery-thumbs', {
-      spaceBetween: 10,
-      slidesPerView: 4,
-      touchRatio: 0.2,
-      loop: true,
-      loopedSlides: 5, //looped slides should be the same
-      slideToClickedSlide: true,
-    });
-    galleryTop.controller.control = galleryThumbs;
-    galleryThumbs.controller.control = galleryTop;
-
   </script>
 </body>
 </html>
diff --git a/playground/index.html b/playground/index.html
@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <title>Swiper Playground</title>
-    <link rel="stylesheet" href="../dist/css/swiper.min.css">
+    <link rel="stylesheet" href="../build/css/swiper.css">
     <meta name="viewport" content="width=device-width">
 </head>
 <body>
-    <div class="swiper-container">
+    <div class="swiper-container top">
         <div class="swiper-scrollbar"></div>
         <div class="swiper-button-prev"></div>
         <div class="swiper-button-next"></div>
@@ -22,9 +22,27 @@
             <div class="swiper-slide">Slide 8</div>
             <div class="swiper-slide">Slide 9</div>
             <div class="swiper-slide">Slide 10</div>
+            <div class="swiper-slide">Slide 11</div>
+            <div class="swiper-slide">Slide 12</div>
         </div>
         <div class="swiper-pagination"></div>
     </div>
+    <div class="swiper-container thumbs">
+        <div class="swiper-wrapper">
+            <div class="swiper-slide">Slide 1</div>
+            <div class="swiper-slide">Slide 2</div>
+            <div class="swiper-slide">Slide 3</div>
+            <div class="swiper-slide">Slide 4</div>
+            <div class="swiper-slide">Slide 5</div>
+            <div class="swiper-slide">Slide 6</div>
+            <div class="swiper-slide">Slide 7</div>
+            <div class="swiper-slide">Slide 8</div>
+            <div class="swiper-slide">Slide 9</div>
+            <div class="swiper-slide">Slide 10</div>
+            <div class="swiper-slide">Slide 11</div>
+            <div class="swiper-slide">Slide 12</div>
+        </div>
+    </div>
     <style>
     body, html {
         padding: 0;
@@ -44,14 +62,26 @@
         line-height: 300px;
     }
     </style>
-    <script src="../dist/js/swiper.min.js"></script>
+    <script src="../build/js/swiper.js"></script>
     <script>
+        var swiperThumbs = new Swiper({
+            el: '.thumbs',
+            slidesPerView: 4,
+            spaceBetween: 20,
+            watchSlidesVisibility: true,
+            watchSlidesProgress: true,
+            loop: true,
+            // freeMode: true,
+            // centeredSlides: true,
+            // slideToClickedSlide: true,
+        })
         var swiper = new Swiper({
-            el: '.swiper-container',
-            initialSlide: 2,
+            el: '.swiper-container.top',
+            initialSlide: 0,
             spaceBetween: 50,
-            slidesPerView: 2,
-            centeredSlides: true,
+            slidesPerView: 1,
+            // centeredSlides: true,
+            loop: true,
             slideToClickedSlide: true,
             grabCursor: true,
             scrollbar: {
@@ -70,6 +100,9 @@
               nextEl: '.swiper-button-next',
               prevEl: '.swiper-button-prev',
             },
+            thumbs: {
+                swiper: swiperThumbs,
+            },
         });
     </script>
 </body>

diff --git a/scripts/build-config.js b/scripts/build-config.js
@@ -18,6 +18,7 @@ module.exports = {
     'effect-cube',
     'effect-flip',
     'effect-coverflow',
+    'thumbs',
   ],
   target: 'universal',
   themeColor: '#007aff',

diff --git a/src/components/core/core-class.js b/src/components/core/core-class.js
@@ -70,7 +70,7 @@ class Swiper extends SwiperClass {
       if (module.params) {
         const moduleParamName = Object.keys(module.params)[0];
         const moduleParams = module.params[moduleParamName];
-        if (typeof moduleParams !== 'object') return;
+        if (typeof moduleParams !== 'object' || moduleParams === null) return;
         if (!(moduleParamName in params && 'enabled' in moduleParams)) return;
         if (params[moduleParamName] === true) {
           params[moduleParamName] = { enabled: true };

diff --git a/src/components/core/update/updateSlidesProgress.js b/src/components/core/update/updateSlidesProgress.js
@@ -1,3 +1,5 @@
+import $ from '../../../utils/dom';
+
 export default function (translate = (this && this.translate) || 0) {
   const swiper = this;
   const params = swiper.params;
@@ -13,6 +15,9 @@ export default function (translate = (this && this.translate) || 0) {
   // Visible Slides
   slides.removeClass(params.slideVisibleClass);
 
+  swiper.visibleSlidesIndexes = [];
+  swiper.visibleSlides = [];
+
   for (let i = 0; i < slides.length; i += 1) {
     const slide = slides[i];
     const slideProgress = (
@@ -25,9 +30,12 @@ export default function (translate = (this && this.translate) || 0) {
                 || (slideAfter > 0 && slideAfter <= swiper.size)
                 || (slideBefore <= 0 && slideAfter >= swiper.size);
       if (isVisible) {
+        swiper.visibleSlides.push(slide);
+        swiper.visibleSlidesIndexes.push(i);
         slides.eq(i).addClass(params.slideVisibleClass);
       }
     }
     slide.progress = rtl ? -slideProgress : slideProgress;
   }
+  swiper.visibleSlides = $(swiper.visibleSlides);
 }