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,