Add: slidesPerView configuration

joe223 · Dec 22, 2019 · bc303b4 · bc303b4
1 parent 0fb4ccf
commit bc303b4
Show file tree

Hide file tree

Showing 13 changed files with 309 additions and 750 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -55,3 +55,9 @@
 # v1.2.0 - Released on 2019/12/16
 
 - Add: export ESM and full-featured file
+
+# v1.3.0 -
+
+- Add: `slidesPerView` parameter
+- Add: `centeredSlides` parameter
+- Fix: Unexpected slide width (#14)
diff --git a/README.md b/README.md
@@ -128,6 +128,8 @@ Looking for exact example and demonstrations? [👉click me](https://joe223.gith
 | resistanceRatio | number | 0.85 | This option allows you to control resistance ratio |
 | plugins | TinySwiperPlugins[] | undefined | Plugins for Tiny-Swiper instance. |
 | excludeElements | HTMLElements[] | `[]` | An HTMLElement array which contains all elements that do not trigger swipe. |
+| slidesPerView | number | 1 | Number of slides per view (slides visible at the same time on slider's container). |
+| centeredSlides | boolean | false | If true, then active slide will be centered, not always on the left side. |
 
 ##### Mousewheel Control Parameters
 

diff --git a/demo/slidesPerView.html b/demo/slidesPerView.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Demo</title>
+    <style>
+        body {
+            font-family: Arial, Helvetica, sans-serif;
+        }
+        html,
+        body,
+        .swiper-wrapper {
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .a {
+            background: yellowgreen;
+        }
+        .b {
+            background: lightblue;
+        }
+        .c {
+            height: 100%;
+        }
+        .a,
+        .b {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: aliceblue;
+            font-size: 4rem;
+        }
+        .swiper-slide {
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+        }
+        .swiper-container {
+            height: 50%;
+            /* touch-action: none; */
+        }
+        .swiper-slide-active {
+            border: 2px solid salmon;
+        }
+    </style>
+</head>
+<body>
+    <script src="/lib/index.js"></script>
+
+    <!-- Slider main container -->
+    <div class="swiper-container" id="swiper1">
+        <!-- Additional required wrapper -->
+        <div class="swiper-wrapper">
+            <!-- Slides -->
+            <div class="a swiper-slide">1</div>
+            <div class="b swiper-slide">2</div>
+            <div class="a swiper-slide">3</div>
+            <div class="b swiper-slide">4</div>
+            <div class="b swiper-slide">5</div>
+            <div class="b swiper-slide">6</div>
+        </div>
+        <!-- If we need pagination -->
+        <div class="swiper-pagination"></div>
+    </div>
+
+    <script>
+        var mySwiper = new Swiper('#swiper1', {
+            speed: 300,
+            spaceBetween: 100,
+            slidesPerView: 2.4,
+            centeredSlides: false,
+            initialSlide: 5,
+            mousewheel: true
+        });
+    </script>
+</body>
+
diff --git a/lib/index.esm.js b/lib/index.esm.js
@@ -113,6 +113,8 @@ function () {
       longSwipesMs: 300,
       intermittent: 0,
       spaceBetween: 0,
+      slidesPerView: 1,
+      centeredSlides: false,
       slidePrevClass: 'swiper-slide-prev',
       slideNextClass: 'swiper-slide-next',
       slideActiveClass: 'swiper-slide-active',
@@ -246,25 +248,20 @@ function () {
       handleTouchEnd: function handleTouchEnd() {
         if (!_this2.touchStatus.isTouchStart) return;
         var index = _this2.index,
-            slideSize = _this2.slideSize,
+            boxSize = _this2.boxSize,
             touchStatus = _this2.touchStatus;
         var swipTime = Date.now() - touchStatus.touchStartTime;
-        var computedOffset = getTranslate($wrapper, _this2.isHorizontal) - touchStatus.startOffset;
+        var transform = getTranslate($wrapper, _this2.isHorizontal);
+        var computedOffset = transform - touchStatus.startOffset;
+        var jump = Math.ceil(Math.abs(computedOffset) / boxSize);
+        var longSwipeIndex = Math.ceil(Math.abs(computedOffset) / boxSize - config.longSwipesRatio);
         $wrapper.style.transition = "transform ease " + config.speed + "ms"; // long swip
 
         if (swipTime > _this2.config.longSwipesMs) {
-          if (Math.abs(computedOffset) >= slideSize * config.longSwipesRatio) {
-            _this2.scroll(computedOffset > 0 ? index - 1 : index + 1, true);
-          } else {
-            _this2.scroll(index, true);
-          }
+          _this2.scroll(_this2.index + longSwipeIndex * (computedOffset > 0 ? -1 : 1), true);
         } else {
           // short swip
-          if (computedOffset === 0) {
-            _this2.scroll(index, true);
-          } else {
-            _this2.scroll(computedOffset > 0 ? index - 1 : index + 1, true);
-          }
+          _this2.scroll(computedOffset > 0 ? index - jump : index + jump, true);
         }
 
         _this2.initTouchStatus();
@@ -354,31 +351,31 @@ function () {
     if (this.scrolling && !force) return;
     var config = this.config,
         minIndex = this.minIndex,
-        maxIndex = this.maxIndex;
+        maxIndex = this.maxIndex,
+        maxTransform = this.maxTransform;
     index = index < minIndex ? minIndex : index > maxIndex ? maxIndex : index;
     this.emit('before-slide', this.index, this, index);
-    var offset = index * this.boxSize;
+    var offset = index * this.boxSize + this.baseTransform;
     this.scrolling = true;
-    this.transform(-offset);
+    this.transform(-(offset > maxTransform ? maxTransform : offset));
     var $current = this.$list[index];
     var $prev = this.$list[index - 1];
     var $next = this.$list[index + 1];
+    this.$list.forEach(function ($slide, i) {
+      removeClassName($slide, [config.slidePrevClass, config.slideNextClass, config.slideActiveClass]);
 
-    if ($current) {
-      addClassName($current, config.slideActiveClass);
-      removeClassName($current, [config.slidePrevClass, config.slideNextClass]);
-    }
-
-    if ($prev) {
-      addClassName($prev, config.slidePrevClass);
-      removeClassName($prev, [config.slideActiveClass, config.slideNextClass]);
-    }
+      if (i === index) {
+        addClassName($current, config.slideActiveClass);
+      }
 
-    if ($next) {
-      addClassName($next, config.slideNextClass);
-      removeClassName($next, [config.slideActiveClass, config.slidePrevClass]);
-    }
+      if (i === index - 1) {
+        addClassName($prev, config.slidePrevClass);
+      }
 
+      if (i === index + 1) {
+        addClassName($next, config.slideNextClass);
+      }
+    });
     this.index = index;
     setTimeout(function () {
       _this3.scrolling = false;
@@ -390,19 +387,19 @@ function () {
   _proto.scrollPixel = function scrollPixel(px) {
     var ratio = px.toExponential().split('e')[1];
     var expand = ratio <= 0 ? Math.pow(10, -(ratio - 1)) : 1;
+    var oldTransform = getTranslate(this.$wrapper, this.isHorizontal);
 
     if (this.config.resistance) {
-      if (px > 0 && this.index === 0) {
+      if (px > 0 && oldTransform - this.minTransform >= 0) {
         px -= Math.pow(px * expand, this.config.resistanceRatio) / expand;
-      } else if (px < 0 && this.index === this.maxIndex) {
+      } else if (px < 0 && oldTransform + this.maxTransform <= 0) {
         px += Math.pow(-px * expand, this.config.resistanceRatio) / expand;
       } // if ((px > 0 && this.index === 0) || (px < 0 && this.index === this.maxIndex)) {
       //     px = px * Math.pow(this.config.resistanceRatio, 4)
       // }
 
     }
 
-    var oldTransform = getTranslate(this.$wrapper, this.isHorizontal);
     this.transform(oldTransform + px);
   };
 
@@ -439,14 +436,18 @@ function () {
     this.$list = [].slice.call($el.getElementsByClassName(config.slideClass));
     this.minIndex = 0;
     this.maxIndex = this.$list.length - 1;
-    this.slideSize = isHorizontal ? $el.offsetWidth : $el.offsetHeight;
+    this.viewSize = isHorizontal ? $el.offsetWidth : $el.offsetHeight;
+    this.slideSize = (this.viewSize - Math.floor(config.slidesPerView) * config.spaceBetween) / config.slidesPerView;
     this.boxSize = this.slideSize + config.spaceBetween;
+    this.baseTransform = config.centeredSlides ? (this.slideSize - this.viewSize) / 2 : 0;
+    this.minTransform = -this.baseTransform;
+    this.maxTransform = this.boxSize * this.$list.length - config.spaceBetween - this.viewSize - this.baseTransform;
     this.$list.forEach(function (item) {
       item.style[isHorizontal ? 'width' : 'height'] = _this4.slideSize + "px";
       item.style[isHorizontal ? 'margin-right' : 'margin-bottom'] = config.spaceBetween + "px";
     });
     wrapperStyle.willChange = 'transform';
-    wrapperStyle.transition = "transform ease " + this.config.speed + "ms";
+    wrapperStyle.transition = "transform ease " + config.speed + "ms";
     wrapperStyle[isHorizontal ? 'width' : 'height'] = this.boxSize * this.$list.length + "px";
     wrapperStyle.display = 'flex';
     wrapperStyle.flexDirection = isHorizontal ? 'row' : 'column';
@@ -625,4 +626,3 @@ function SwiperPluginPagination(instance) {
 
 export default Swiper;
 export { SwiperPluginLazyload, SwiperPluginPagination };
-//# sourceMappingURL=index.esm.js.map
diff --git a/lib/index.esm.js.map b/lib/index.esm.js.map