Prevent transitionEnd propagation - Add active class to infinite clones

README.md

@@ -320,6 +320,11 @@ li {
         <td>class name for slider next control then disabled</td>
         <td>default: 'disabled'</td>
     </tr>
+    <tr>
+        <td>centerMode</td>
+        <td>enable centerMode with an additional option to make first slide left align (do not combine with infinite, centerMode will work with variable width slides too)</td>
+        <td>default: {enableCenterMode: false, firstSlideLeftAlign: false}</td>
+    </tr>
 </table>
 
 ## Events

dist/jquery.lory.js

@@ -141,7 +141,8 @@ function lory(slider, opts) {
      */
     function setActiveElement(slides, currentIndex) {
         var _options = options,
-            classNameActiveSlide = _options.classNameActiveSlide;
+            classNameActiveSlide = _options.classNameActiveSlide,
+            infinite = _options.infinite;
 
 
         slides.forEach(function (element, index) {
@@ -151,6 +152,12 @@ function lory(slider, opts) {
         });
 
         slides[currentIndex].classList.add(classNameActiveSlide);
+
+        if (infinite && currentIndex === slides.length - infinite * 2) {
+            slides[infinite - 1].classList.add(classNameActiveSlide);
+        } else if (currentIndex === infinite) {
+            slides[slides.length - infinite].classList.add(classNameActiveSlide);
+        }
     }
 
     /**
@@ -242,9 +249,10 @@ function lory(slider, opts) {
 
 
         var duration = slideSpeed;
+        var nextOffset = void 0;
 
         var nextSlide = direction ? index + 1 : index - 1;
-        var maxOffset = Math.round(slidesWidth - frameWidth);
+        var maxOffset = Math.round(slidesWidth - (options.centerMode.enableCenterMode ? slides[0].clientWidth / 2 : frameWidth));
 
         dispatchSliderEvent('before', 'slide', {
             index: index,
@@ -288,7 +296,15 @@ function lory(slider, opts) {
             duration = rewindSpeed;
         }
 
-        var nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0);
+        /**
+         * if centerMode enabled, then offset is set center of frame/container
+         */
+        if (options.centerMode.enableCenterMode) {
+            nextOffset = Math.max(slides[nextIndex].offsetLeft * -1 + frameWidth / 2 - slides[nextIndex].clientWidth / 2, maxOffset * -1);
+            nextOffset = nextOffset >= 0 && options.centerMode.firstSlideLeftAlign ? 0 : nextOffset;
+        } else {
+            nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0);
+        }
 
         if (rewind && Math.abs(position.x) === maxOffset && direction) {
             nextOffset = 0;
@@ -458,6 +474,9 @@ function lory(slider, opts) {
 
             index = index + infinite;
             position.x = slides[index].offsetLeft * -1;
+        } else if (options.centerMode.enableCenterMode && !options.centerMode.firstSlideLeftAlign) {
+            translate(slides[index].offsetLeft * -1 + frameWidth / 2 - slides[index].clientWidth / 2, rewindSpeed, ease);
+            position.x = slides[index].offsetLeft * -1 + frameWidth / 2 - slides[index].clientWidth / 2;
         } else {
             translate(slides[index].offsetLeft * -1, rewindSpeed, ease);
             position.x = slides[index].offsetLeft * -1;
@@ -545,8 +564,8 @@ function lory(slider, opts) {
     var delta = void 0;
     var isScrolling = void 0;
 
-    function onTransitionEnd() {
-        if (transitionEndCallback) {
+    function onTransitionEnd(event) {
+        if (transitionEndCallback && event.target === slideContainer) {
             transitionEndCallback();
 
             transitionEndCallback = undefined;
@@ -1013,7 +1032,14 @@ exports.default = {
    * If false, slides lory to the first slide on window resize.
    * @rewindOnResize {boolean}
    */
-  rewindOnResize: true
+  rewindOnResize: true,
+
+  /**
+   * enable centerMode functionality by setting enableCenterMode as true
+   * by setting enableCenterMode and firstSlideLeftAlign as true makes first slide left align with centerMode functionality
+   * @centerMode {object}
+   */
+  centerMode: { enableCenterMode: false, firstSlideLeftAlign: false }
 };
 
 /***/ }),

dist/lory.js

@@ -141,7 +141,8 @@ function lory(slider, opts) {
      */
     function setActiveElement(slides, currentIndex) {
         var _options = options,
-            classNameActiveSlide = _options.classNameActiveSlide;
+            classNameActiveSlide = _options.classNameActiveSlide,
+            infinite = _options.infinite;
 
 
         slides.forEach(function (element, index) {
@@ -151,6 +152,12 @@ function lory(slider, opts) {
         });
 
         slides[currentIndex].classList.add(classNameActiveSlide);
+
+        if (infinite && currentIndex === slides.length - infinite * 2) {
+            slides[infinite - 1].classList.add(classNameActiveSlide);
+        } else if (currentIndex === infinite) {
+            slides[slides.length - infinite].classList.add(classNameActiveSlide);
+        }
     }
 
     /**
@@ -242,9 +249,10 @@ function lory(slider, opts) {
 
 
         var duration = slideSpeed;
+        var nextOffset = void 0;
 
         var nextSlide = direction ? index + 1 : index - 1;
-        var maxOffset = Math.round(slidesWidth - frameWidth);
+        var maxOffset = Math.round(slidesWidth - (options.centerMode.enableCenterMode ? slides[0].clientWidth / 2 : frameWidth));
 
         dispatchSliderEvent('before', 'slide', {
             index: index,
@@ -288,7 +296,15 @@ function lory(slider, opts) {
             duration = rewindSpeed;
         }
 
-        var nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0);
+        /**
+         * if centerMode enabled, then offset is set center of frame/container
+         */
+        if (options.centerMode.enableCenterMode) {
+            nextOffset = Math.max(slides[nextIndex].offsetLeft * -1 + frameWidth / 2 - slides[nextIndex].clientWidth / 2, maxOffset * -1);
+            nextOffset = nextOffset >= 0 && options.centerMode.firstSlideLeftAlign ? 0 : nextOffset;
+        } else {
+            nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0);
+        }
 
         if (rewind && Math.abs(position.x) === maxOffset && direction) {
             nextOffset = 0;
@@ -458,6 +474,9 @@ function lory(slider, opts) {
 
             index = index + infinite;
             position.x = slides[index].offsetLeft * -1;
+        } else if (options.centerMode.enableCenterMode && !options.centerMode.firstSlideLeftAlign) {
+            translate(slides[index].offsetLeft * -1 + frameWidth / 2 - slides[index].clientWidth / 2, rewindSpeed, ease);
+            position.x = slides[index].offsetLeft * -1 + frameWidth / 2 - slides[index].clientWidth / 2;
         } else {
             translate(slides[index].offsetLeft * -1, rewindSpeed, ease);
             position.x = slides[index].offsetLeft * -1;
@@ -545,8 +564,8 @@ function lory(slider, opts) {
     var delta = void 0;
     var isScrolling = void 0;
 
-    function onTransitionEnd() {
-        if (transitionEndCallback) {
+    function onTransitionEnd(event) {
+        if (transitionEndCallback && event.target === slideContainer) {
             transitionEndCallback();
 
             transitionEndCallback = undefined;
@@ -1013,7 +1032,14 @@ exports.default = {
    * If false, slides lory to the first slide on window resize.
    * @rewindOnResize {boolean}
    */
-  rewindOnResize: true
+  rewindOnResize: true,
+
+  /**
+   * enable centerMode functionality by setting enableCenterMode as true
+   * by setting enableCenterMode and firstSlideLeftAlign as true makes first slide left align with centerMode functionality
+   * @centerMode {object}
+   */
+  centerMode: { enableCenterMode: false, firstSlideLeftAlign: false }
 };
 
 /***/ }),

src/defaults.js

@@ -97,5 +97,12 @@ export default {
      * If false, slides lory to the first slide on window resize.
      * @rewindOnResize {boolean}
      */
-    rewindOnResize: true
+    rewindOnResize: true,
+
+    /**
+     * enable centerMode functionality by setting enableCenterMode as true
+     * by setting enableCenterMode and firstSlideLeftAlign as true makes first slide left align with centerMode functionality
+     * @centerMode {object}
+     */
+    centerMode: {enableCenterMode: false, firstSlideLeftAlign: false}
 };

src/index.html

@@ -362,6 +362,82 @@ <h2>Variable width</h2>
         });
     });
 
+</code></pre></div>
+
+            <h2>Center Mode</h2>
+
+            <div class="slider js_centermode centermode">
+                <div class="frame js_frame">
+                    <ul class="slides js_slides">
+                        <li class="js_slide" style="width: 220px;">220</li>
+                        <li class="js_slide" style="width: 190px;">190</li>
+                        <li class="js_slide" style="width: 150px;">150</li>
+                        <li class="js_slide" style="width: 130px;">130</li>
+                        <li class="js_slide" style="width: 250px;">250</li>
+                        <li class="js_slide" style="width: 180px;">180</li>
+                        <li class="js_slide" style="width: 200px;">200</li>
+                        <li class="js_slide" style="width: 140px;">140</li>
+                        <li class="js_slide" style="width: 120px;">120</li>
+                        <li class="js_slide" style="width: 240px;">240</li>
+                    </ul>
+                </div>
+
+                <span class="js_prev prev">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
+                </span>
+
+                <span class="js_next next">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
+                </span>
+            </div>
+
+<div class="examplecode"><pre><code class="javascript">
+    document.addEventListener('DOMContentLoaded', function () {
+        var centerModeSlides = document.querySelector('.js_centermode');
+
+        lory(centerModeSlides, {
+            centerMode: { enableCenterMode: true }
+        });
+    });
+
+</code></pre></div>
+
+            <h2>Center Mode - First Slide Left Align</h2>
+
+            <div class="slider js_centermode_leftalign centermode">
+                <div class="frame js_frame">
+                    <ul class="slides js_slides">
+                        <li class="js_slide">1</li>
+                        <li class="js_slide">2</li>
+                        <li class="js_slide">3</li>
+                        <li class="js_slide">4</li>
+                        <li class="js_slide">5</li>
+                        <li class="js_slide">6</li>
+                        <li class="js_slide">7</li>
+                        <li class="js_slide">8</li>
+                        <li class="js_slide">9</li>
+                        <li class="js_slide">10</li>
+                    </ul>
+                </div>
+
+                <span class="js_prev prev">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
+                </span>
+
+                <span class="js_next next">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
+                </span>
+            </div>
+
+<div class="examplecode"><pre><code class="javascript">
+    document.addEventListener('DOMContentLoaded', function () {
+        var centerModeFirstSlideLeftAlign = document.querySelector('.js_centermode');
+
+        lory(centerModeFirstSlideLeftAlign, {
+            centerMode: { enableCenterMode: true, firstSlideLeftAlign: true }
+        });
+    });
+
 </code></pre></div>
 
             <h2>Multiple slides to scroll</h2>
@@ -725,6 +801,11 @@ <h2>Options</h2>
                     <td>class name for slider next control</td>
                     <td>default: 'js_next'</td>
                 </tr>
+                <tr>
+                    <th>centerMode</th>
+                    <td>enable centerMode with an additional option to make first slide left align (do not combine with infinite, centerMode will work with variable width slides too)</td>
+                    <td>default: {enableCenterMode: false, firstSlideLeftAlign: false}</td>
+                </tr>
             </table>
         </section>
 
@@ -801,6 +882,8 @@ <h2>Events</h2>
             var multiSlides       = document.querySelector('.js_multislides');
             var ease              = document.querySelector('.js_ease');
             var events            = document.querySelector('.js_events');
+            var centerModeSlides  = document.querySelector('.js_centermode');
+            var centerModeFirstSlideLeftAlign = document.querySelector('.js_centermode_leftalign');
 
             lory(simple, {
                 infinite: 1,
@@ -865,6 +948,16 @@ <h2>Events</h2>
                 enableMouseEvents: true
             });
 
+            lory(centerModeSlides, {
+                centerMode: { enableCenterMode: true },
+                enableMouseEvents: true
+            });
+
+            lory(centerModeFirstSlideLeftAlign, {
+                centerMode: { enableCenterMode: true, firstSlideLeftAlign: true },
+                enableMouseEvents: true
+            });
+
             lory(multiSlides, {
                 infinite: 4,
                 slidesToScroll: 4,