From 7ef4cb8911efaca99cb941919520130f9627abe0 Mon Sep 17 00:00:00 2001 From: Nishant Joshi Date: Tue, 4 Jun 2019 18:58:54 +0530 Subject: [PATCH 1/9] centerMode functionality added --- src/defaults.js | 4 +- src/index.html | 978 ++++++++++++++++++++++++++++-------------------- src/lory.js | 108 +++--- static/app.css | 16 + 4 files changed, 654 insertions(+), 452 deletions(-) diff --git a/src/defaults.js b/src/defaults.js index 697e771..c95de09 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -97,5 +97,7 @@ export default { * If false, slides lory to the first slide on window resize. * @rewindOnResize {boolean} */ - rewindOnResize: true + rewindOnResize: true, + + centerMode: false }; diff --git a/src/index.html b/src/index.html index 047cb86..4eafbc3 100644 --- a/src/index.html +++ b/src/index.html @@ -1,39 +1,103 @@ - - - - lory - - - - - - - - - -
-
- Fork me on GitHub -
- -
- -

Touch enabled minimalistic slider written in vanilla JavaScript

-

Hardware accelerated transitions

-

Usable as a jQuery plugin

-

Options for custom easing effects

-

infinite looping ~ carousel

-

No compromises for fallbacks

-

Written in ecmascript 6

-

Using webpack, babel & eslint for development

- - Download Here -

or via cdn from cdnjs

- -
-
+ + + + lory + + + + + + + + + +

Multiple slides to scroll

+ +
+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
+
+ + + + + + + + + + + + + + + + +
+ +
+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
+
+ + + + + + + + + + + + + + + + +
+ + +
+
+ Fork me on GitHub +
+ +
+ +

Touch enabled minimalistic slider written in vanilla JavaScript

+

Hardware accelerated transitions

+

Usable as a jQuery plugin

+

Options for custom easing effects

+

infinite looping ~ carousel

+

No compromises for fallbacks

+

Written in ecmascript 6

+

Using webpack, babel & eslint for development

+ + Download Here + +

or via cdn from cdnjs

+ +
+

Prerequisited Html structure
Class names can be changed through options


@@ -55,9 +119,10 @@ 
Prerequisited Html structure
Class names can be changed throug
                     <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>
-
+ +
-
+

Prerequisited CSS styles


@@ -113,34 +178,46 @@ 
Prerequisited CSS styles

             .next svg, .prev svg {
                 width: 25px;
             }
-
-
- -
-

Single element - Fixed width [infinite]

- -
-
-
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
-
- - - - - - - - + +
+
+ +
+

Single element - Fixed width [infinite]

+ +
+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
-

+            
+                
+                    
+                        
+                    
+                
+            
+
+            
+                
+                    
+                        
+                    
+                
+            
+
+ +
+ 

     document.addEventListener('DOMContentLoaded', function () {
         var simple = document.querySelector('.js_simple');
 
@@ -149,32 +226,44 @@ 
Single element - Fixed width [infinite]

         });
     });
 
-
- -

Single element - Percentage width [infinite]

- -
-
-
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
-
- - - - - - - - + +
+ +

Single element - Percentage width [infinite]

+ +
+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
-

+            
+                
+                    
+                        
+                    
+                
+            
+
+            
+                
+                    
+                        
+                    
+                
+            
+
+ +
+ 

     document.addEventListener('DOMContentLoaded', function () {
         var percentage = document.querySelector('.js_percentage');
 
@@ -183,32 +272,44 @@ 
Single element - Percentage width [infinite]

         });
     });
 
-
- -

Single element - Fixed width [rewind]

- -
-
-
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
-
- - - - - - - - + +
+ +

Single element - Fixed width [rewind]

+ +
+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
-

+            
+                
+                    
+                        
+                    
+                
+            
+
+            
+                
+                    
+                        
+                    
+                
+            
+
+ +
+ 

     document.addEventListener('DOMContentLoaded', function () {
         var rewind = document.querySelector('.js_rewind');
 
@@ -217,34 +318,46 @@ 
Single element - Fixed width [rewind]

         });
     });
 
-
- -

Single element - dot navigation

- -
-
-
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
-
- - - - - - - - - -
    +     +
    + +

    Single element - dot navigation

    + +
    +
    +
      +
    • 1
      • +
    • 2
      • +
    • 3
      • +
    • 4
      • +
    • 5
      • +
    • 6
      • +
    -
    
+            
+                
+                    
+                        
+                    
+                
+            
+
+            
+                
+                    
+                        
+                    
+                
+            
+
+            
      
+
      + +
      + 
      
     document.addEventListener('DOMContentLoaded', function () {
         var simple_dots       = document.querySelector('.js_simple_dots');
         var dot_count         = simple_dots.querySelectorAll('.js_slide').length;
@@ -290,32 +403,44 @@ 
      Single element - dot navigation
      
         });
     });
 
-
      - -

      Single element - Percentage width [rewind]

      - -
      -
      -
        -
      • 1
        • -
      • 2
        • -
      • 3
        • -
      • 4
        • -
      • 5
        • -
      • 6
        • -
      -
      - - - - - - - - +       +
      + +

      Single element - Percentage width [rewind]

      + +
      +
      +
        +
      • 1
        • +
      • 2
        • +
      • 3
        • +
      • 4
        • +
      • 5
        • +
      • 6
        • +
      -
      
+            
+                
+                    
+                        
+                    
+                
+            
+
+            
+                
+                    
+                        
+                    
+                
+            
+
      + +
      + 
      
     document.addEventListener('DOMContentLoaded', function () {
         var rewind_percentage = document.querySelector('.js_rewind_percentage');
 
@@ -324,36 +449,48 @@ 
      Single element - Percentage width [rewind]
      
         });
     });
 
-
      - -

      Variable width

      - -
      -
      -
        -
      • 220
        • -
      • 190
        • -
      • 150
        • -
      • 130
        • -
      • 250
        • -
      • 180
        • -
      • 200
        • -
      • 140
        • -
      • 120
        • -
      • 240
        • -
      -
      - - - - - - - - +       +
      + +

      Variable width

      + +
      +
      +
        +
      • 220
        • +
      • 190
        • +
      • 150
        • +
      • 130
        • +
      • 250
        • +
      • 180
        • +
      • 200
        • +
      • 140
        • +
      • 120
        • +
      • 240
        • +
      -
      
+            
+                
+                    
+                        
+                    
+                
+            
+
+            
+                
+                    
+                        
+                    
+                
+            
+
      + +
      + 
      
     document.addEventListener('DOMContentLoaded', function () {
         var variableWidth = document.querySelector('.js_variablewlidth');
 
@@ -362,38 +499,13 @@ 
      Variable width
      
         });
     });
 
-
      - -

      Multiple slides to scroll

      - -
      -
      -
        -
      • 1
        • -
      • 2
        • -
      • 3
        • -
      • 4
        • -
      • 5
        • -
      • 6
        • -
      • 7
        • -
      • 8
        • -
      • 9
        • -
      • 10
        • -
      • 11
        • -
      • 12
        • -
      -
      - - - - - - - - -
      +       +
      + -
      
+
+        
      
+            
      
     document.addEventListener('DOMContentLoaded', function () {
         var multiSlides = document.querySelector('.js_multislides');
 
@@ -403,38 +515,50 @@ 
      Multiple slides to scroll
      
         });
     });
 
-
      
-
-            
      Custom easings
      
-
-            
      
-                
      
-                    
        
-                        
      • 1
        • 
-                        
      • 2
        • 
-                        
      • 3
        • 
-                        
      • 4
        • 
-                        
      • 5
        • 
-                        
      • 6
        • 
-                        
      • 7
        • 
-                        
      • 8
        • 
-                        
      • 9
        • 
-                        
      • 10
        • 
-                        
      • 11
        • 
-                        
      • 12
        • 
-                    
      
-                
      
-
-                
-                    
-                
-
-                
-                    
-                
+
      +
      + +

      Custom easings

      + +
      +
      +
        +
      • 1
        • +
      • 2
        • +
      • 3
        • +
      • 4
        • +
      • 5
        • +
      • 6
        • +
      • 7
        • +
      • 8
        • +
      • 9
        • +
      • 10
        • +
      • 11
        • +
      • 12
        • +
      -
      
+            
+                
+                    
+                        
+                    
+                
+            
+
+            
+                
+                    
+                        
+                    
+                
+            
+
      + +
      + 
      
     document.addEventListener('DOMContentLoaded', function () {
         var ease = document.querySelector('.js_ease');
 
@@ -448,33 +572,45 @@ 
      Custom easings
      
         });
     });
 
-
      - -

      Showing events

      - -
      -
      -
        -
      • 1
        • -
      • 2
        • -
      • 3
        • -
      • 4
        • -
      • 5
        • -
      • 6
        • -
      -
      - - - - - - - - +       +
      + +

      Showing events

      + +
      +
      +
        +
      • 1
        • +
      • 2
        • +
      • 3
        • +
      • 4
        • +
      • 5
        • +
      • 6
        • +
      - -
      
+            
+                
+                    
+                        
+                    
+                
+            
+
+            
+                
+                    
+                        
+                    
+                
+            
+
      + + +
      + 
      
     document.addEventListener('DOMContentLoaded', function () {
         var events = document.querySelector('.js_events');
 
@@ -504,14 +640,16 @@ 
      Showing events
      
         });
     });
 
-
      +       +
      -
      + -
      -

      initialize multiple similiar sliders

      +
      +

      initialize multiple similiar sliders

      -
      
+        
      
+            
      
         'use strict';
 
         document.addEventListener('DOMContentLoaded', function () {
@@ -520,14 +658,16 @@ 
      initialize multiple similiar sliders
      
             });
         });
 
-
      
+
      +
      -
      +
      -
      -

      Consume it as a commonJS module

      +
      +

      Consume it as a commonJS module

      -
      
+        
      
+            
      
     "use strict";
 
     var lory = require('lory.js').lory;
@@ -540,14 +680,16 @@ 
      Consume it as a commonJS module
      
         });
     });
 
-
      
+
      +
      -
      +
      -
      -

      Consume it as an ES2015 module

      +
      +

      Consume it as an ES2015 module

      -
      
+        
      
+            
      
     import {lory} from 'lory.js';
 
     document.addEventListener('DOMContentLoaded', () => {
@@ -558,16 +700,20 @@ 
      Consume it as an ES2015 module
      
         });
     });
 
-
      
+
      +
      -
      -

      Use it as a jQuery Plugin

      +
      +

      Use it as a jQuery Plugin

      -
      
+            
      
+                
      
         <script src="js/jquery.lory.min.js"></script>
-
      
+
      +
      -
      
+            
      
+                
      
         'use strict';
 
         var $elements = $('.js_simple');
@@ -582,14 +728,16 @@ 
      Use it as a jQuery Plugin
      
             // $elements.data().lory.next();
         });
 
-
      
+
      +
      -
      +

      Local development

      -
      
+            
      
+                
      
         // To install dev dependencies run:
 
         yarn install
@@ -606,14 +754,16 @@ 
      Local development
      
 
         yarn run build
 
-
      
+
      +

      Run tests

      -
      
+            
      
+                
      
         // To install dev dependencies run:
 
         yarn install
@@ -622,9 +772,10 @@ 
      Run tests
      
 
         yarn run karma-local
 
-
      
+
      +
      - +
      @@ -648,12 +799,14 @@

      Public API

      setup: - binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation) + binds eventlisteners, merging default and user options, setup the slides based on DOM (called + once during initialisation) Call setup if DOM or user options have changed or eventlisteners needs to be rebinded. reset: - sets the slider back to the starting position and resets the current index (called on Resize event) + sets the slider back to the starting position and resets the current index (called on Resize + event) destroy: @@ -682,7 +835,8 @@

      Options

      rewind - if slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite) + if slider reached the last slide, with next click the slider goes back to the startindex. (do + not combine with infinite) default: false @@ -780,129 +934,137 @@

      Events

      Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT license - + - - + + - - + events.addEventListener('before.lory.init', handleEvent); + events.addEventListener('after.lory.init', handleEvent); + events.addEventListener('before.lory.slide', handleEvent); + events.addEventListener('after.lory.slide', handleEvent); + events.addEventListener('before.lory.destroy', handleEvent); + events.addEventListener('after.lory.destroy', handleEvent); + + events.addEventListener('on.lory.resize', handleEvent); + events.addEventListener('on.lory.touchend', handleEvent); + events.addEventListener('on.lory.touchmove', handleEvent); + events.addEventListener('on.lory.touchstart', handleEvent); + + // lory(events, { + // infinite: 1 + // }); + }); + + + \ No newline at end of file diff --git a/src/lory.js b/src/lory.js index 97cd010..3dc9141 100755 --- a/src/lory.js +++ b/src/lory.js @@ -7,7 +7,7 @@ import defaults from './defaults.js'; const slice = Array.prototype.slice; -export function lory (slider, opts) { +export function lory(slider, opts) { let position; let slidesWidth; let frameWidth; @@ -23,7 +23,7 @@ export function lory (slider, opts) { let prefixes; let transitionEndCallback; - let index = 0; + let index = 0; let options = {}; let touchEventParams = supportsPassive() ? { passive: true } : false; @@ -38,8 +38,8 @@ export function lory (slider, opts) { * private * set active class to element which is the current slide */ - function setActiveElement (slides, currentIndex) { - const {classNameActiveSlide} = options; + function setActiveElement(slides, currentIndex) { + const { classNameActiveSlide } = options; slides.forEach((element, index) => { if (element.classList.contains(classNameActiveSlide)) { @@ -57,11 +57,11 @@ export function lory (slider, opts) { * @param {array} slideArray * @return {array} array of updated slideContainer elements */ - function setupInfinite (slideArray) { - const {infinite} = options; + function setupInfinite(slideArray) { + const { infinite } = options; const front = slideArray.slice(0, infinite); - const back = slideArray.slice(slideArray.length - infinite, slideArray.length); + const back = slideArray.slice(slideArray.length - infinite, slideArray.length); front.forEach(function (element) { const cloned = element.cloneNode(true); @@ -85,7 +85,7 @@ export function lory (slider, opts) { * [dispatchSliderEvent description] * @return {[type]} [description] */ - function dispatchSliderEvent (phase, type, detail) { + function dispatchSliderEvent(phase, type, detail) { dispatchEvent(slider, `${phase}.lory.${type}`, detail); } @@ -96,7 +96,7 @@ export function lory (slider, opts) { * @duration {number} time in milliseconds for the transistion * @ease {string} easing css property */ - function translate (to, duration, ease) { + function translate(to, duration, ease) { const style = slideContainer && slideContainer.style; if (style) { @@ -109,7 +109,7 @@ export function lory (slider, opts) { /** * returns an element's width */ - function elementWidth (element) { + function elementWidth(element) { return element.getBoundingClientRect().width || element.offsetWidth; } @@ -121,7 +121,7 @@ export function lory (slider, opts) { * * @direction {boolean} */ - function slide (nextIndex, direction) { + function slide(nextIndex, direction) { const { slideSpeed, slidesToScroll, @@ -138,7 +138,7 @@ export function lory (slider, opts) { let duration = slideSpeed; const nextSlide = direction ? index + 1 : index - 1; - const maxOffset = Math.round(slidesWidth - frameWidth); + const maxOffset = (options.centerMode) ? Math.round(slidesWidth - frameWidth) + 220 : Math.round(slidesWidth - frameWidth); //TODO: 220 dispatchSliderEvent('before', 'slide', { index, @@ -157,17 +157,17 @@ export function lory (slider, opts) { if (typeof nextIndex !== 'number') { if (direction) { - if (infinite && index + (infinite * 2) !== slides.length) { - nextIndex = index + (infinite - index % infinite); - } else { - nextIndex = index + slidesToScroll; - } + if (infinite && index + (infinite * 2) !== slides.length) { + nextIndex = index + (infinite - index % infinite); + } else { + nextIndex = index + slidesToScroll; + } } else { - if (infinite && index % infinite !== 0) { - nextIndex = index - index % infinite; - } else { - nextIndex = index - slidesToScroll; - } + if (infinite && index % infinite !== 0) { + nextIndex = index - index % infinite; + } else { + nextIndex = index - slidesToScroll; + } } } @@ -182,7 +182,24 @@ export function lory (slider, opts) { duration = rewindSpeed; } - let nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0); + let nextOffset; + + if (options.centerMode) { + if (slides.length === nextIndex + 1 && direction) { + nextOffset = Math.min(slides[index + 1].offsetLeft * -1, maxOffset * -1) + (slides[0].clientWidth / 2); + } else if (!direction) { + if (index === 0) { + nextOffset = 0; + } else { + nextOffset = Math.min(Math.max(slides[nextIndex + 1].offsetLeft * -1, maxOffset * -1) + (slides[0].clientWidth / 2), 0); + } + } else { + nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1) + (slides[0].clientWidth / 2), 0); + } + + } else { + nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0); + } if (rewind && Math.abs(position.x) === maxOffset && direction) { nextOffset = 0; @@ -233,8 +250,13 @@ export function lory (slider, opts) { * update classes for next and prev arrows * based on user settings */ - if (prevCtrl && !infinite && !rewindPrev && nextIndex === 0) { - prevCtrl.classList.add(classNameDisabledPrevCtrl); + if (prevCtrl && !infinite && !rewindPrev) { + if (!options.centerMode && nextIndex === 0) { + prevCtrl.classList.add(classNameDisabledPrevCtrl); + } else if (options.centerMode) { + //prevCtrl.classList.add(classNameDisabledPrevCtrl); + } + } if (nextCtrl && !infinite && !rewind && ((nextIndex + 1) === slides.length)) { @@ -250,11 +272,11 @@ export function lory (slider, opts) { * public * setup function */ - function setup () { + function setup() { dispatchSliderEvent('before', 'init'); prefixes = detectPrefixes(); - options = {...defaults, ...opts}; + options = { ...defaults, ...opts }; const { classNameFrame, @@ -320,8 +342,8 @@ export function lory (slider, opts) { * public * reset function: called on resize */ - function reset () { - var {infinite, ease, rewindSpeed, rewindOnResize, classNameActiveSlide, initialIndex} = options; + function reset() { + var { infinite, ease, rewindSpeed, rewindOnResize, classNameActiveSlide, initialIndex } = options; slidesWidth = elementWidth(slideContainer); frameWidth = elementWidth(frame); @@ -358,7 +380,7 @@ export function lory (slider, opts) { * public * slideTo: called on clickhandler */ - function slideTo (index) { + function slideTo(index) { slide(index); } @@ -366,7 +388,7 @@ export function lory (slider, opts) { * public * returnIndex function: called on clickhandler */ - function returnIndex () { + function returnIndex() { return index - options.infinite || 0; } @@ -374,7 +396,7 @@ export function lory (slider, opts) { * public * prev function: called on clickhandler */ - function prev () { + function prev() { slide(false, false); } @@ -382,7 +404,7 @@ export function lory (slider, opts) { * public * next function: called on clickhandler */ - function next () { + function next() { slide(false, true); } @@ -390,7 +412,7 @@ export function lory (slider, opts) { * public * destroy function: called to gracefully destroy the lory instance */ - function destroy () { + function destroy() { dispatchSliderEvent('before', 'destroy'); // remove event listeners @@ -431,7 +453,7 @@ export function lory (slider, opts) { let delta; let isScrolling; - function onTransitionEnd () { + function onTransitionEnd() { if (transitionEndCallback) { transitionEndCallback(); @@ -439,8 +461,8 @@ export function lory (slider, opts) { } } - function onTouchstart (event) { - const {enableMouseEvents} = options; + function onTouchstart(event) { + const { enableMouseEvents } = options; const touches = event.touches ? event.touches[0] : event; if (enableMouseEvents) { @@ -452,7 +474,7 @@ export function lory (slider, opts) { frame.addEventListener('touchmove', onTouchmove, touchEventParams); frame.addEventListener('touchend', onTouchend); - const {pageX, pageY} = touches; + const { pageX, pageY } = touches; touchOffset = { x: pageX, @@ -469,9 +491,9 @@ export function lory (slider, opts) { }); } - function onTouchmove (event) { + function onTouchmove(event) { const touches = event.touches ? event.touches[0] : event; - const {pageX, pageY} = touches; + const { pageX, pageY } = touches; delta = { x: pageX - touchOffset.x, @@ -492,7 +514,7 @@ export function lory (slider, opts) { }); } - function onTouchend (event) { + function onTouchend(event) { /** * time between touchstart and touchend in milliseconds * @duration {number} @@ -552,13 +574,13 @@ export function lory (slider, opts) { }); } - function onClick (event) { + function onClick(event) { if (delta.x) { event.preventDefault(); } } - function onResize (event) { + function onResize(event) { if (frameWidth !== elementWidth(frame)) { reset(); diff --git a/static/app.css b/static/app.css index bca5141..a4c60a8 100644 --- a/static/app.css +++ b/static/app.css @@ -398,3 +398,19 @@ footer { margin-right: 20px; } } + + +.multislides li{ + width: 420px; + margin-right: 40px +} + +.multislides .slides { + transition-timing-function: ease; + transition-duration: 600ms; + transform: translateX(440px); +} + +.js_multislidesnoncenter li { + width: 300px; +} \ No newline at end of file From ee17504d67ba0331f95e767f348f1c48c27aaac4 Mon Sep 17 00:00:00 2001 From: Nishant Joshi Date: Tue, 11 Jun 2019 19:08:08 +0530 Subject: [PATCH 2/9] CenterMode: fixed width slides, first slide left align --- src/index-original.html | 1139 +++++++++++++++++++++++++++++++++++++++ src/index.html | 236 ++++---- src/lory.js | 55 +- static/app.css | 12 +- 4 files changed, 1303 insertions(+), 139 deletions(-) create mode 100644 src/index-original.html diff --git a/src/index-original.html b/src/index-original.html new file mode 100644 index 0000000..d5e76bf --- /dev/null +++ b/src/index-original.html @@ -0,0 +1,1139 @@ + + + + + + lory + + + + + + + + + + +

      Multiple slides to scroll with CenterMode, first slide non center

      + +
      +
      +
        +
      • 1
        • +
      • 2
        • +
      • 3
        • +
      • 4
        • +
      • 5
        • +
      +
      + + + + + + + + + + + + + + + + +
      + +
      + 
      
+                document.addEventListener('DOMContentLoaded', function () {
+                    var centerModeSlides = document.querySelector('.js_centermode');
+            
+                    lory(centerModeSlides, {
+                        centerMode: true,
+                        slidesToScroll: 1,
+                        enableMouseEvents: true
+                    });
+                });
+            
+
      +
      +
      +
      + Fork me on GitHub +
      + +
      + +

      Touch enabled minimalistic slider written in vanilla JavaScript

      +

      Hardware accelerated transitions

      +

      Usable as a jQuery plugin

      +

      Options for custom easing effects

      +

      infinite looping ~ carousel

      +

      No compromises for fallbacks

      +

      Written in ecmascript 6

      +

      Using webpack, babel & eslint for development

      + + Download Here + +

      or via cdn from cdnjs

      + +
      +
      +

      Prerequisited Html structure
      Class names can be changed through options

      + + 
      
+            <div class="slider js_slider">
+                <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>
+                    </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>
+
      +
      + +
      +

      Prerequisited CSS styles

      + + 
      
+            /**
+             * (optional) define here the style definitions which should be applied on the slider container
+             * e.g. width including further controls like arrows etc.
+             */
+            .slider {}
+
+            .frame {
+                /**
+                 * (optional) wrapper width, specifies width of the slider frame.
+                 */
+                width: 880px;
+
+                position: relative;
+                font-size: 0;
+                line-height: 0;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            .slides {
+                display: inline-block;
+            }
+
+            li {
+                position: relative;
+                display: inline-block;
+
+                /**
+                 * (optional) if the content inside the slide element has a defined size.
+                 */
+                width: 880px;
+            }
+
+            .prev, .next {
+                position: absolute;
+                top: 50%;
+                margin-top: -25px;
+                display: block;
+                cursor: pointer;
+            }
+
+            .next {
+                right: 0;
+            }
+
+            .prev {
+                left: 0;
+            }
+
+            .next svg, .prev svg {
+                width: 25px;
+            }
+
      +
      +
      + +
      +

      Single element - Fixed width [infinite]

      + +
      +
      +
        +
      • 1
        • +
      • 2
        • +
      • 3
        • +
      • 4
        • +
      • 5
        • +
      • 6
        • +
      +
      + + + + + + + + + + + + + + + + +
      + +
      + 
      
+    document.addEventListener('DOMContentLoaded', function () {
+        var simple = document.querySelector('.js_simple');
+
+        lory(simple, {
+            infinite: 1
+        });
+    });
+
+
      +
      + +

      Single element - Percentage width [infinite]

      + +
      +
      +
        +
      • 1
        • +
      • 2
        • +
      • 3
        • +
      • 4
        • +
      • 5
        • +
      • 6
        • +
      +
      + + + + + + + + + + + + + + + + +
      + +
      + 
      
+    document.addEventListener('DOMContentLoaded', function () {
+        var percentage = document.querySelector('.js_percentage');
+
+        lory(percentage, {
+            infinite: 1
+        });
+    });
+
+
      +
      + +

      Single element - Fixed width [rewind]

      + +
      +
      +
        +
      • 1
        • +
      • 2
        • +
      • 3
        • +
      • 4
        • +
      • 5
        • +
      • 6
        • +
      +
      + + + + + + + + + + + + + + + + +
      + +
      + 
      
+    document.addEventListener('DOMContentLoaded', function () {
+        var rewind = document.querySelector('.js_rewind');
+
+        lory(rewind, {
+            rewind: true
+        });
+    });
+
+
      +
      + +

      Single element - dot navigation

      + +
      +
      +
        +
      • 1
        • +
      • 2
        • +
      • 3
        • +
      • 4
        • +
      • 5
        • +
      • 6
        • +
      +
      + + + + + + + + + + + + + + + + + +
        +
        + +
        + 
        
+    document.addEventListener('DOMContentLoaded', function () {
+        var simple_dots       = document.querySelector('.js_simple_dots');
+        var dot_count         = simple_dots.querySelectorAll('.js_slide').length;
+        var dot_container     = simple_dots.querySelector('.js_dots');
+        var dot_list_item     = document.createElement('li');
+
+        function handleDotEvent(e) {
+            if (e.type === 'before.lory.init') {
+              for (var i = 0, len = dot_count; i < len; i++) {
+                var clone = dot_list_item.cloneNode();
+                dot_container.appendChild(clone);
+              }
+              dot_container.childNodes[0].classList.add('active');
+            }
+            if (e.type === 'after.lory.init') {
+              for (var i = 0, len = dot_count; i < len; i++) {
+                dot_container.childNodes[i].addEventListener('click', function(e) {
+                  dot_navigation_slider.slideTo(Array.prototype.indexOf.call(dot_container.childNodes, e.target));
+                });
+              }
+            }
+            if (e.type === 'after.lory.slide') {
+              for (var i = 0, len = dot_container.childNodes.length; i < len; i++) {
+                dot_container.childNodes[i].classList.remove('active');
+              }
+              dot_container.childNodes[e.detail.currentSlide - 1].classList.add('active');
+            }
+            if (e.type === 'on.lory.resize') {
+                for (var i = 0, len = dot_container.childNodes.length; i < len; i++) {
+                    dot_container.childNodes[i].classList.remove('active');
+                }
+                dot_container.childNodes[0].classList.add('active');
+            }
+        }
+        simple_dots.addEventListener('before.lory.init', handleDotEvent);
+        simple_dots.addEventListener('after.lory.init', handleDotEvent);
+        simple_dots.addEventListener('after.lory.slide', handleDotEvent);
+        simple_dots.addEventListener('on.lory.resize', handleDotEvent);
+
+        var dot_navigation_slider = lory(simple_dots, {
+            infinite: 1,
+            enableMouseEvents: true
+        });
+    });
+
+
        +
        + +

        Single element - Percentage width [rewind]

        + +
        +
        +
          +
        • 1
          • +
        • 2
          • +
        • 3
          • +
        • 4
          • +
        • 5
          • +
        • 6
          • +
        +
        + + + + + + + + + + + + + + + + +
        + +
        + 
        
+    document.addEventListener('DOMContentLoaded', function () {
+        var rewind_percentage = document.querySelector('.js_rewind_percentage');
+
+        lory(rewind_percentage, {
+            rewind: true
+        });
+    });
+
+
        +
        + +

        Variable width

        + +
        +
        +
          +
        • 220
          • +
        • 190
          • +
        • 150
          • +
        • 130
          • +
        • 250
          • +
        • 180
          • +
        • 200
          • +
        • 140
          • +
        • 120
          • +
        • 240
          • +
        +
        + + + + + + + + + + + + + + + + +
        + +
        + 
        
+    document.addEventListener('DOMContentLoaded', function () {
+        var variableWidth = document.querySelector('.js_variablewlidth');
+
+        lory(variableWidth, {
+            rewind: true
+        });
+    });
+
+
        +
        + + + +

        Multiple slides to scroll

        + +
        +
        +
          +
        • 1
          • +
        • 2
          • +
        • 3
          • +
        • 4
          • +
        • 5
          • +
        • 6
          • +
        • 7
          • +
        • 8
          • +
        • 9
          • +
        • 10
          • +
        • 11
          • +
        • 12
          • +
        +
        + + + + + + + + + + + + + + + + +
        + +
        + 
        
+    document.addEventListener('DOMContentLoaded', function () {
+        var multiSlides = document.querySelector('.js_multislides');
+
+        lory(multiSlides, {
+            infinite: 4,
+            slidesToScroll: 4
+        });
+    });
+
+
        +
        + +

        Custom easings

        + +
        +
        +
          +
        • 1
          • +
        • 2
          • +
        • 3
          • +
        • 4
          • +
        • 5
          • +
        • 6
          • +
        • 7
          • +
        • 8
          • +
        • 9
          • +
        • 10
          • +
        • 11
          • +
        • 12
          • +
        +
        + + + + + + + + + + + + + + + + +
        + +
        + 
        
+    document.addEventListener('DOMContentLoaded', function () {
+        var ease = document.querySelector('.js_ease');
+
+        // http://easings.net/
+
+        lory(ease, {
+            infinite: 4,
+            slidesToScroll: 4,
+            slideSpeed: 1000,
+            ease: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
+        });
+    });
+
+
        +
        + +

        Showing events

        + +
        +
        +
          +
        • 1
          • +
        • 2
          • +
        • 3
          • +
        • 4
          • +
        • 5
          • +
        • 6
          • +
        +
        + + + + + + + + + + + + + + + + +
        + + +
        + 
        
+    document.addEventListener('DOMContentLoaded', function () {
+        var events = document.querySelector('.js_events');
+
+        function handleEvent(e) {
+            var newSpan = document.createElement('span');
+            var time = new Date();
+            time = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds() + ',' + time.getMilliseconds();
+            var newContent = document.createTextNode('[' + time + '] Event dispatched: "' + e.type + '"');
+            newSpan.appendChild(newContent);
+            e.target.nextElementSibling.appendChild(newSpan);
+        }
+
+        events.addEventListener('before.lory.init', handleEvent);
+        events.addEventListener('after.lory.init', handleEvent);
+        events.addEventListener('before.lory.slide', handleEvent);
+        events.addEventListener('after.lory.slide', handleEvent);
+        events.addEventListener('before.lory.destroy', handleEvent);
+        events.addEventListener('after.lory.destroy', handleEvent);
+
+        events.addEventListener('on.lory.resize', handleEvent);
+        events.addEventListener('on.lory.touchend', handleEvent);
+        events.addEventListener('on.lory.touchmove', handleEvent);
+        events.addEventListener('on.lory.touchstart', handleEvent);
+
+        lory(events, {
+            infinite: 1
+        });
+    });
+
+
        +
        + +
        + +
        +

        initialize multiple similiar sliders

        + +
        + 
        
+        'use strict';
+
+        document.addEventListener('DOMContentLoaded', function () {
+            Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index) {
+                lory(element, {});
+            });
+        });
+
+
        +
        + +
        + +
        +

        Consume it as a commonJS module

        + +
        + 
        
+    "use strict";
+
+    var lory = require('lory.js').lory;
+
+    document.addEventListener('DOMContentLoaded', function() {
+        var slider = document.querySelector('.js_slider');
+
+        lory(slider, {
+            // options going here
+        });
+    });
+
+
        +
        + +
        + +
        +

        Consume it as an ES2015 module

        + +
        + 
        
+    import {lory} from 'lory.js';
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const slider = document.querySelector('.js_slider');
+
+        lory(slider, {
+            // options going here
+        });
+    });
+
+
        +
        + +
        +

        Use it as a jQuery Plugin

        + +
        + 
        
+        <script src="js/jquery.lory.min.js"></script>
+
        +
        + +
        + 
        
+        'use strict';
+
+        var $elements = $('.js_simple');
+
+        $(function() {
+            $elements.lory({
+                infinite: 1
+            });
+
+            $elements.data().lory.slideTo(4);
+            // $elements.data().lory.prev();
+            // $elements.data().lory.next();
+        });
+
+
        +
        + +
        + +
        +

        Local development

        + +
        + 
        
+        // To install dev dependencies run:
+
+        yarn install
+
+        // To start the development server run:
+
+        yarn run dev
+
+        // To lint your code run:
+
+        yarn run lint
+
+        // To make a full new build run:
+
+        yarn run build
+
+
        +
        +
        + + +
        +

        Run tests

        + +
        + 
        
+        // To install dev dependencies run:
+
+        yarn install
+
+        // To start the karma tests locally run:
+
+        yarn run karma-local
+
+
        +
        + + +
        + +
        +

        Public API

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        prev:slides to the previous slide
        next:slides to the next slide
        slideTo:slides to the index given as an argument: (arguments: index {number})
        returnIndex:returns the index of the current slide element
        setup:binds eventlisteners, merging default and user options, setup the slides based on DOM (called + once during initialisation)Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.
        reset:sets the slider back to the starting position and resets the current index (called on Resize + event)
        destroy:unmount/destroy the instance of lory
        +
        + +
        +

        Options

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        slidesToScrollslides scrolled at oncedefault: 1
        enableMouseEventsenabled mouse eventsdefault: false
        infinitelike carousel, works with multiple slides. (do not combine with rewind)default: false (number of visible slides)
        rewindif slider reached the last slide, with next click the slider goes back to the startindex. (do + not combine with infinite)default: false
        slideSpeedtime in milliseconds for the animation of a valid slide attemptdefault: 300
        rewindSpeedtime in milliseconds for the animation of the rewind after the last slidedefault: 600
        snapBackSpeedtime for the snapBack of the slider if the slide attempt was not validdefault: 200
        easecubic bezier easing functions: http://easings.net/dedefault: 'ease'
        classNameFrameclass name for slider framedefault: 'js_frame'
        classNameSlideContainerclass name for slides containerdefault: 'js_slides'
        classNamePrevCtrlclass name for slider previous controldefault: 'js_prev'
        classNameNextCtrlclass name for slider next controldefault: 'js_next'
        +
        + +
        +

        Events

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        before.lory.initfires before initialisation (first in setup function)
        after.lory.initfires after initialisation (end of setup function)
        before.lory.slidearguments: currentSlide, nextSlidefires before slide change
        after.lory.slidearguments: currentSlidefires after slide change
        before.lory.destroyfires before the slider instance gets destroyed
        after.lory.destroyfires after the slider instance gets destroyed
        on.lory.resizefires on every resize event
        on.lory.touchstartfires on every slider touchstart event
        on.lory.touchmovefires on every slider touchmove event
        on.lory.touchendfires on every slider touchend event
        +
        + +
        + Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT license +
        + + + + + + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 4eafbc3..4bcdc50 100644 --- a/src/index.html +++ b/src/index.html @@ -13,69 +13,6 @@ -

        Multiple slides to scroll

        - -
        -
        -
          -
        • 1
          • -
        • 2
          • -
        • 3
          • -
        • 4
          • -
        • 5
          • -
        -
        - - - - - - - - - - - - - - - - -
        - -
        -
        -
          -
        • 1
          • -
        • 2
          • -
        • 3
          • -
        • 4
          • -
        • 5
          • -
        -
        - - - - - - - - - - - - - - - - -
        - -
        Fork me on GitHub @@ -502,7 +439,101 @@

        Variable width

        +

        Center Mode :: Same width Multiple slides, first slide left align

        + +
        +
        +
          +
        • +
          1
          +
          • +
        • +
          2
          +
          • +
        • +
          3
          +
          • +
        • +
          4
          +
          • +
        • +
          5
          +
          • +
        +
        + + + + + + + + + + + + + + + +
        + +
        + 
        
+            document.addEventListener('DOMContentLoaded', function () {
+                var centerModeSlides = document.querySelector('.js_centermode');
+        
+                lory(centerModeSlides, {
+                    centerMode: true,
+                    slidesToScroll: 1,
+                    enableMouseEvents: true
+                });
+            });
+        
+
        +
        + +

        Multiple slides to scroll

        + +
        +
        +
          +
        • 1
          • +
        • 2
          • +
        • 3
          • +
        • 4
          • +
        • 5
          • +
        • 6
          • +
        • 7
          • +
        • 8
          • +
        • 9
          • +
        • 10
          • +
        • 11
          • +
        • 12
          • +
        +
        + + + + + + + + + + + + + + + + + 
        
@@ -952,16 +983,16 @@ 
        Events
        
         var rewind = document.querySelector('.js_rewind');
         var rewind_percentage = document.querySelector('.js_rewind_percentage');
         var variableWidth = document.querySelector('.js_variablewidth');
-        var multiSlides = document.querySelector('.js_multislides');
+        var centerModeSlides = document.querySelector('.js_centermode');
         var ease = document.querySelector('.js_ease');
         var events = document.querySelector('.js_events');
 
-        var multiSlidesNonCenter = document.querySelector('.js_multislidesnoncenter');
+        var multiSlides = document.querySelector('.js_multislides');
 
-        // lory(simple, {
-        //     infinite: 1,
-        //     enableMouseEvents: true
-        // });
+        lory(simple, {
+            infinite: 1,
+            enableMouseEvents: true
+        });
 
         function handleDotEvent(e) {
             if (e.type === 'before.lory.init') {
@@ -996,49 +1027,50 @@ 
        Events
        
         simple_dots.addEventListener('after.lory.slide', handleDotEvent);
         simple_dots.addEventListener('on.lory.resize', handleDotEvent);
 
-        // var dot_navigation_slider = lory(simple_dots, {
-        //     infinite: 1,
-        //     enableMouseEvents: true
-        // });
+        var dot_navigation_slider = lory(simple_dots, {
+            infinite: 1,
+            enableMouseEvents: true
+        });
 
-        // lory(percentage, {
-        //     infinite: 1,
-        //     enableMouseEvents: true
-        // });
+        lory(percentage, {
+            infinite: 1,
+            enableMouseEvents: true
+        });
 
-        // lory(rewind, {
-        //     rewind: true,
-        //     enableMouseEvents: true
-        // });
+        lory(rewind, {
+            rewind: true,
+            enableMouseEvents: true
+        });
 
-        // lory(rewind_percentage, {
-        //     rewind: true,
-        //     enableMouseEvents: true
-        // });
+        lory(rewind_percentage, {
+            rewind: true,
+            enableMouseEvents: true
+        });
 
-        // lory(variableWidth, {
-        //     rewind: true,
-        //     enableMouseEvents: true
-        // });
+        lory(variableWidth, {
+            rewind: true,
+            enableMouseEvents: true
+        });
 
-        lory(multiSlides, {
+        lory(centerModeSlides, {
             centerMode: true,
             slidesToScroll: 1,
             enableMouseEvents: true
         });
 
-        lory(multiSlidesNonCenter, {
-            slidesToScroll: 3,
+        lory(multiSlides, {
+            infinite: 4,
+            slidesToScroll: 4,
             enableMouseEvents: true
         });
 
-        // lory(ease, {
-        //     infinite: 4,
-        //     slidesToScroll: 4,
-        //     slideSpeed: 300,
-        //     ease: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
-        //     enableMouseEvents: true
-        // });
+        lory(ease, {
+            infinite: 4,
+            slidesToScroll: 4,
+            slideSpeed: 300,
+            ease: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+            enableMouseEvents: true
+        });
 
         function handleEvent(e) {
             var newSpan = document.createElement('span');
@@ -1061,9 +1093,9 @@ 
        Events
        
         events.addEventListener('on.lory.touchmove', handleEvent);
         events.addEventListener('on.lory.touchstart', handleEvent);
 
-        // lory(events, {
-        //     infinite: 1
-        // });
+        lory(events, {
+            infinite: 1
+        });
     });
 
 
diff --git a/src/lory.js b/src/lory.js
index 3dc9141..a7a8d27 100755
--- a/src/lory.js
+++ b/src/lory.js
@@ -7,7 +7,7 @@ import defaults from './defaults.js';
 
 const slice = Array.prototype.slice;
 
-export function lory(slider, opts) {
+export function lory (slider, opts) {
     let position;
     let slidesWidth;
     let frameWidth;
@@ -38,7 +38,7 @@ export function lory(slider, opts) {
      * private
      * set active class to element which is the current slide
      */
-    function setActiveElement(slides, currentIndex) {
+    function setActiveElement (slides, currentIndex) {
         const { classNameActiveSlide } = options;
 
         slides.forEach((element, index) => {
@@ -57,7 +57,7 @@ export function lory(slider, opts) {
      * @param  {array} slideArray
      * @return {array} array of updated slideContainer elements
      */
-    function setupInfinite(slideArray) {
+    function setupInfinite (slideArray) {
         const { infinite } = options;
 
         const front = slideArray.slice(0, infinite);
@@ -85,7 +85,7 @@ export function lory(slider, opts) {
      * [dispatchSliderEvent description]
      * @return {[type]} [description]
      */
-    function dispatchSliderEvent(phase, type, detail) {
+    function dispatchSliderEvent (phase, type, detail) {
         dispatchEvent(slider, `${phase}.lory.${type}`, detail);
     }
 
@@ -96,7 +96,7 @@ export function lory(slider, opts) {
      * @duration  {number} time in milliseconds for the transistion
      * @ease      {string} easing css property
      */
-    function translate(to, duration, ease) {
+    function translate (to, duration, ease) {
         const style = slideContainer && slideContainer.style;
 
         if (style) {
@@ -109,7 +109,7 @@ export function lory(slider, opts) {
     /**
      * returns an element's width
      */
-    function elementWidth(element) {
+    function elementWidth (element) {
         return element.getBoundingClientRect().width || element.offsetWidth;
     }
 
@@ -121,7 +121,7 @@ export function lory(slider, opts) {
      *
      * @direction  {boolean}
      */
-    function slide(nextIndex, direction) {
+    function slide (nextIndex, direction) {
         const {
             slideSpeed,
             slidesToScroll,
@@ -136,9 +136,9 @@ export function lory(slider, opts) {
         } = options;
 
         let duration = slideSpeed;
+        let snapToFirstSlide = false;
 
         const nextSlide = direction ? index + 1 : index - 1;
-        const maxOffset = (options.centerMode) ? Math.round(slidesWidth - frameWidth) + 220 : Math.round(slidesWidth - frameWidth); //TODO: 220
 
         dispatchSliderEvent('before', 'slide', {
             index,
@@ -173,6 +173,10 @@ export function lory(slider, opts) {
 
         nextIndex = Math.min(Math.max(nextIndex, 0), slides.length - 1);
 
+        let slideStyle = slides[nextIndex].currentStyle || window.getComputedStyle(slides[nextIndex]);
+        let slidePadding = parseFloat(slideStyle.marginLeft) + parseFloat(slideStyle.marginRight);
+        const maxOffset = (options.centerMode) ? Math.round(slidesWidth - frameWidth) + Math.round(frameWidth / 2) - slidePadding : Math.round(slidesWidth - frameWidth);
+
         if (infinite && direction === undefined) {
             nextIndex += infinite;
         }
@@ -190,13 +194,13 @@ export function lory(slider, opts) {
             } else if (!direction) {
                 if (index === 0) {
                     nextOffset = 0;
+                    snapToFirstSlide = true;
                 } else {
                     nextOffset = Math.min(Math.max(slides[nextIndex + 1].offsetLeft * -1, maxOffset * -1) + (slides[0].clientWidth / 2), 0);
                 }
             } else {
                 nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1) + (slides[0].clientWidth / 2), 0);
             }
-
         } else {
             nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0);
         }
@@ -253,10 +257,9 @@ export function lory(slider, opts) {
         if (prevCtrl && !infinite && !rewindPrev) {
             if (!options.centerMode && nextIndex === 0) {
                 prevCtrl.classList.add(classNameDisabledPrevCtrl);
-            } else if (options.centerMode) {
-                //prevCtrl.classList.add(classNameDisabledPrevCtrl);
+            } else if (options.centerMode && snapToFirstSlide) {
+                prevCtrl.classList.add(classNameDisabledPrevCtrl);
             }
-
         }
 
         if (nextCtrl && !infinite && !rewind && ((nextIndex + 1) === slides.length)) {
@@ -272,7 +275,7 @@ export function lory(slider, opts) {
      * public
      * setup function
      */
-    function setup() {
+    function setup () {
         dispatchSliderEvent('before', 'init');
 
         prefixes = detectPrefixes();
@@ -342,7 +345,7 @@ export function lory(slider, opts) {
      * public
      * reset function: called on resize
      */
-    function reset() {
+    function reset () {
         var { infinite, ease, rewindSpeed, rewindOnResize, classNameActiveSlide, initialIndex } = options;
 
         slidesWidth = elementWidth(slideContainer);
@@ -380,7 +383,7 @@ export function lory(slider, opts) {
      * public
      * slideTo: called on clickhandler
      */
-    function slideTo(index) {
+    function slideTo (index) {
         slide(index);
     }
 
@@ -388,7 +391,7 @@ export function lory(slider, opts) {
      * public
      * returnIndex function: called on clickhandler
      */
-    function returnIndex() {
+    function returnIndex () {
         return index - options.infinite || 0;
     }
 
@@ -396,7 +399,7 @@ export function lory(slider, opts) {
      * public
      * prev function: called on clickhandler
      */
-    function prev() {
+    function prev () {
         slide(false, false);
     }
 
@@ -404,7 +407,7 @@ export function lory(slider, opts) {
      * public
      * next function: called on clickhandler
      */
-    function next() {
+    function next () {
         slide(false, true);
     }
 
@@ -412,7 +415,7 @@ export function lory(slider, opts) {
      * public
      * destroy function: called to gracefully destroy the lory instance
      */
-    function destroy() {
+    function destroy () {
         dispatchSliderEvent('before', 'destroy');
 
         // remove event listeners
@@ -453,7 +456,7 @@ export function lory(slider, opts) {
     let delta;
     let isScrolling;
 
-    function onTransitionEnd() {
+    function onTransitionEnd () {
         if (transitionEndCallback) {
             transitionEndCallback();
 
@@ -461,7 +464,7 @@ export function lory(slider, opts) {
         }
     }
 
-    function onTouchstart(event) {
+    function onTouchstart (event) {
         const { enableMouseEvents } = options;
         const touches = event.touches ? event.touches[0] : event;
 
@@ -491,7 +494,7 @@ export function lory(slider, opts) {
         });
     }
 
-    function onTouchmove(event) {
+    function onTouchmove (event) {
         const touches = event.touches ? event.touches[0] : event;
         const { pageX, pageY } = touches;
 
@@ -514,7 +517,7 @@ export function lory(slider, opts) {
         });
     }
 
-    function onTouchend(event) {
+    function onTouchend (event) {
         /**
          * time between touchstart and touchend in milliseconds
          * @duration {number}
@@ -551,7 +554,7 @@ export function lory(slider, opts) {
         const direction = delta.x < 0;
 
         if (!isScrolling) {
-            if (isValid && !isOutOfBounds) {
+            if ((isValid && !isOutOfBounds) || options.centerMode) {
                 slide(false, direction);
             } else {
                 translate(position.x, options.snapBackSpeed);
@@ -574,13 +577,13 @@ export function lory(slider, opts) {
         });
     }
 
-    function onClick(event) {
+    function onClick (event) {
         if (delta.x) {
             event.preventDefault();
         }
     }
 
-    function onResize(event) {
+    function onResize (event) {
         if (frameWidth !== elementWidth(frame)) {
             reset();
 
diff --git a/static/app.css b/static/app.css
index a4c60a8..2abaf46 100644
--- a/static/app.css
+++ b/static/app.css
@@ -400,17 +400,7 @@ footer {
 }
 
 
-.multislides li{
+.centermode li{
     width: 420px;
     margin-right: 40px
 }
-
-.multislides .slides {
-    transition-timing-function: ease;
-    transition-duration: 600ms;
-    transform: translateX(440px);
-}
-
-.js_multislidesnoncenter li {
-    width: 300px;
-}
\ No newline at end of file

From d15774d6517823ad06074fcfb8e9084229707256 Mon Sep 17 00:00:00 2001
From: Nishant Joshi 
Date: Tue, 11 Jun 2019 19:24:28 +0530
Subject: [PATCH 3/9] updated readme.md and default.js

---
 README.md       | 5 +++++
 src/defaults.js | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/README.md b/README.md
index d86a9da..4d7353f 100644
--- a/README.md
+++ b/README.md
@@ -320,6 +320,11 @@ li {
         class name for slider next control then disabled
         default: 'disabled'
     
+    
+        centerMode
+        enable centerMode for equal width slides where first slide will be left aligned
+        default: false
+    
 
 
 ## Events
diff --git a/src/defaults.js b/src/defaults.js
index c95de09..6802538 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -99,5 +99,9 @@ export default {
      */
     rewindOnResize: true,
 
+    /**
+     * If true, enable centerMode for fixed width slides where first slide will be left aligned.
+     * @centerMode {boolean}
+     */
     centerMode: false
 };

From 80122c87d0bf5e06f1fe651f3cccb384a0f1f47e Mon Sep 17 00:00:00 2001
From: Nishant Joshi 
Date: Wed, 12 Jun 2019 16:58:50 +0530
Subject: [PATCH 4/9] updated html documentation for centerMode option

---
 src/defaults.js | 2 +-
 src/index.html  | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/defaults.js b/src/defaults.js
index 6802538..f07c3ef 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -100,7 +100,7 @@ export default {
     rewindOnResize: true,
 
     /**
-     * If true, enable centerMode for fixed width slides where first slide will be left aligned.
+     * If true, enable centerMode for equal width slides where first slide will be left aligned.
      * @centerMode {boolean}
      */
     centerMode: false
diff --git a/src/index.html b/src/index.html
index 4bcdc50..f5af8c8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -910,6 +910,11 @@ 
        Options
        
                     class name for slider next control
                     default: 'js_next'
                 
+                
+                    centerMode
+                    enable centerMode for equal width slides where first slide will be left aligned
+                    default: false
+
        From ce96028d8e119591661b8a9850ab2a3ec5ac34dd Mon Sep 17 00:00:00 2001 From: Nishant Joshi Date: Thu, 13 Jun 2019 12:09:41 +0530 Subject: [PATCH 5/9] updated code to make actual centerMode effect, earlier it was first slide left align now first slide will be actual center aligned --- README.md | 2 +- src/defaults.js | 2 +- src/index.html | 35 +++++++++++++++-------------------- src/lory.js | 32 ++++++++++++++------------------ static/app.css | 8 ++++++-- 5 files changed, 37 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 4d7353f..ff36179 100644 --- a/README.md +++ b/README.md @@ -322,7 +322,7 @@ li { centerMode - enable centerMode for equal width slides where first slide will be left aligned + enable centerMode default: false diff --git a/src/defaults.js b/src/defaults.js index f07c3ef..1442e65 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -100,7 +100,7 @@ export default { rewindOnResize: true, /** - * If true, enable centerMode for equal width slides where first slide will be left aligned. + * If true, enable centerMode * @centerMode {boolean} */ centerMode: false diff --git a/src/index.html b/src/index.html index f5af8c8..07de91f 100644 --- a/src/index.html +++ b/src/index.html @@ -439,26 +439,21 @@

        Variable width

         -

        Center Mode :: Same width Multiple slides, first slide left align

        +

        Center Mode

          -
        • -
          1
          -
          • -
        • -
          2
          -
          • -
        • -
          3
          -
          • -
        • -
          4
          -
          • -
        • -
          5
          -
          • +
        • 1
          • +
        • 2
          • +
        • 3
          • +
        • 4
          • +
        • 5
          • +
        • 6
          • +
        • 7
          • +
        • 8
          • +
        • 9
          • +
        • 10
        @@ -994,10 +989,10 @@

        Events

        var multiSlides = document.querySelector('.js_multislides'); - lory(simple, { - infinite: 1, - enableMouseEvents: true - }); + // lory(simple, { + // infinite: 1, + // enableMouseEvents: true + // }); function handleDotEvent(e) { if (e.type === 'before.lory.init') { diff --git a/src/lory.js b/src/lory.js index a7a8d27..f905b60 100755 --- a/src/lory.js +++ b/src/lory.js @@ -136,9 +136,10 @@ export function lory (slider, opts) { } = options; let duration = slideSpeed; - let snapToFirstSlide = false; + let centerModeFirstSlide = false; const nextSlide = direction ? index + 1 : index - 1; + const maxOffset = Math.round(slidesWidth - frameWidth); dispatchSliderEvent('before', 'slide', { index, @@ -173,10 +174,6 @@ export function lory (slider, opts) { nextIndex = Math.min(Math.max(nextIndex, 0), slides.length - 1); - let slideStyle = slides[nextIndex].currentStyle || window.getComputedStyle(slides[nextIndex]); - let slidePadding = parseFloat(slideStyle.marginLeft) + parseFloat(slideStyle.marginRight); - const maxOffset = (options.centerMode) ? Math.round(slidesWidth - frameWidth) + Math.round(frameWidth / 2) - slidePadding : Math.round(slidesWidth - frameWidth); - if (infinite && direction === undefined) { nextIndex += infinite; } @@ -189,17 +186,11 @@ export function lory (slider, opts) { let nextOffset; if (options.centerMode) { - if (slides.length === nextIndex + 1 && direction) { - nextOffset = Math.min(slides[index + 1].offsetLeft * -1, maxOffset * -1) + (slides[0].clientWidth / 2); - } else if (!direction) { - if (index === 0) { - nextOffset = 0; - snapToFirstSlide = true; - } else { - nextOffset = Math.min(Math.max(slides[nextIndex + 1].offsetLeft * -1, maxOffset * -1) + (slides[0].clientWidth / 2), 0); - } + if (!direction) { + nextOffset = (slides[index].offsetLeft * -1) + (frameWidth / 2) - (slides[index].clientWidth / 2); + centerModeFirstSlide = (index === nextIndex); } else { - nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1) + (slides[0].clientWidth / 2), 0); + nextOffset = (slides[nextIndex].offsetLeft * -1) + (frameWidth / 2) - (slides[nextIndex].clientWidth / 2); } } else { nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0); @@ -257,7 +248,7 @@ export function lory (slider, opts) { if (prevCtrl && !infinite && !rewindPrev) { if (!options.centerMode && nextIndex === 0) { prevCtrl.classList.add(classNameDisabledPrevCtrl); - } else if (options.centerMode && snapToFirstSlide) { + } else if (options.centerMode && centerModeFirstSlide) { prevCtrl.classList.add(classNameDisabledPrevCtrl); } } @@ -370,8 +361,13 @@ export function lory (slider, opts) { index = index + infinite; position.x = slides[index].offsetLeft * -1; } else { - translate(slides[index].offsetLeft * -1, rewindSpeed, ease); - position.x = slides[index].offsetLeft * -1; + if (options.centerMode) { + 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; + } } if (classNameActiveSlide) { diff --git a/static/app.css b/static/app.css index 2abaf46..688d606 100644 --- a/static/app.css +++ b/static/app.css @@ -401,6 +401,10 @@ footer { .centermode li{ - width: 420px; - margin-right: 40px + /* width: 220px; + margin-right: 40px; */ + /* width: 420px; + margin-right: 40px; */ + width: 600px; + margin-right: 13px } From 987adbf469bac2ca8282591465e1095e00994e7e Mon Sep 17 00:00:00 2001 From: Nishant Joshi Date: Thu, 13 Jun 2019 13:42:55 +0530 Subject: [PATCH 6/9] added an option to make first slide left align with centerMode effect --- README.md | 4 +-- src/defaults.js | 2 +- src/index.html | 75 +++++++++++++++++++++++++++++++++++++++++++------ src/lory.js | 17 +++++++---- static/app.css | 8 +++--- 5 files changed, 85 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index ff36179..ce24bcd 100644 --- a/README.md +++ b/README.md @@ -322,8 +322,8 @@ li { centerMode - enable centerMode - default: false + enable centerMode with an additional option to make first slide left align + default: { enableCenterMode: false, firstSlideLeftAlign: false } diff --git a/src/defaults.js b/src/defaults.js index 1442e65..1931f69 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -103,5 +103,5 @@ export default { * If true, enable centerMode * @centerMode {boolean} */ - centerMode: false + centerMode: { enableCenterMode: false, firstSlideLeftAlign: false } }; diff --git a/src/index.html b/src/index.html index 07de91f..62c35d6 100644 --- a/src/index.html +++ b/src/index.html @@ -482,7 +482,7 @@

        Center Mode

        var centerModeSlides = document.querySelector('.js_centermode'); lory(centerModeSlides, { - centerMode: true, + centerMode: { enableCenterMode: true }, slidesToScroll: 1, enableMouseEvents: true }); @@ -491,6 +491,58 @@

        Center Mode

        +

        Center Mode :: First Slide Left Align

        + +
        +
        +
          +
        • 1
          • +
        • 2
          • +
        • 3
          • +
        • 4
          • +
        • 5
          • +
        • 6
          • +
        • 7
          • +
        • 8
          • +
        • 9
          • +
        • 10
          • +
        +
        + + + + + + + + + + + + + + + + +
        + +
        + 
        
+                    document.addEventListener('DOMContentLoaded', function () {
+                        var centerModeSlides = document.querySelector('.js_centermode');
+                
+                        lory(centerModeFirstSlideLeftAlign, {
+                            centerMode: { enableCenterMode: true, firstSlideLeftAlign: true },
+                            slidesToScroll: 1,
+                            enableMouseEvents: true
+                        });
+                    });
+                
+
        +
        +

        Multiple slides to scroll

        @@ -907,8 +959,8 @@

        Options

        centerMode - enable centerMode for equal width slides where first slide will be left aligned - default: false + enable centerMode with an additional option to make first slide left align + default: { enableCenterMode: false, firstSlideLeftAlign: false }
        @@ -984,15 +1036,16 @@

        Events

        var rewind_percentage = document.querySelector('.js_rewind_percentage'); var variableWidth = document.querySelector('.js_variablewidth'); var centerModeSlides = document.querySelector('.js_centermode'); + var centerModeFirstSlideLeftAlign = document.querySelector('.js_centermode_leftalign'); var ease = document.querySelector('.js_ease'); var events = document.querySelector('.js_events'); var multiSlides = document.querySelector('.js_multislides'); - // lory(simple, { - // infinite: 1, - // enableMouseEvents: true - // }); + lory(simple, { + infinite: 1, + enableMouseEvents: true + }); function handleDotEvent(e) { if (e.type === 'before.lory.init') { @@ -1053,7 +1106,13 @@

        Events

        }); lory(centerModeSlides, { - centerMode: true, + centerMode: { enableCenterMode: true }, + slidesToScroll: 1, + enableMouseEvents: true + }); + + lory(centerModeFirstSlideLeftAlign, { + centerMode: { enableCenterMode: true, firstSlideLeftAlign: true }, slidesToScroll: 1, enableMouseEvents: true }); diff --git a/src/lory.js b/src/lory.js index f905b60..7dd1a5a 100755 --- a/src/lory.js +++ b/src/lory.js @@ -139,7 +139,6 @@ export function lory (slider, opts) { let centerModeFirstSlide = false; const nextSlide = direction ? index + 1 : index - 1; - const maxOffset = Math.round(slidesWidth - frameWidth); dispatchSliderEvent('before', 'slide', { index, @@ -174,6 +173,10 @@ export function lory (slider, opts) { nextIndex = Math.min(Math.max(nextIndex, 0), slides.length - 1); + let slideStyle = slides[nextIndex].currentStyle || window.getComputedStyle(slides[nextIndex]); + let slideMarginPadding = parseFloat(slideStyle.marginLeft) + parseFloat(slideStyle.marginRight) + parseFloat(slideStyle.paddingLeft) + parseFloat(slideStyle.paddingRight); + const maxOffset = (options.centerMode.enableCenterMode) ? Math.round(slidesWidth - frameWidth) + (frameWidth / 2) + slideMarginPadding : Math.round(slidesWidth - frameWidth); + if (infinite && direction === undefined) { nextIndex += infinite; } @@ -185,13 +188,15 @@ export function lory (slider, opts) { let nextOffset; - if (options.centerMode) { + if (options.centerMode.enableCenterMode) { if (!direction) { nextOffset = (slides[index].offsetLeft * -1) + (frameWidth / 2) - (slides[index].clientWidth / 2); centerModeFirstSlide = (index === nextIndex); } else { nextOffset = (slides[nextIndex].offsetLeft * -1) + (frameWidth / 2) - (slides[nextIndex].clientWidth / 2); } + + nextOffset = (nextOffset >= 0 && options.centerMode.firstSlideLeftAlign) ? 0 : nextOffset; } else { nextOffset = Math.min(Math.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1), 0); } @@ -246,9 +251,9 @@ export function lory (slider, opts) { * based on user settings */ if (prevCtrl && !infinite && !rewindPrev) { - if (!options.centerMode && nextIndex === 0) { + if (!options.centerMode.enableCenterMode && nextIndex === 0) { prevCtrl.classList.add(classNameDisabledPrevCtrl); - } else if (options.centerMode && centerModeFirstSlide) { + } else if (options.centerMode.enableCenterMode && centerModeFirstSlide) { prevCtrl.classList.add(classNameDisabledPrevCtrl); } } @@ -361,7 +366,7 @@ export function lory (slider, opts) { index = index + infinite; position.x = slides[index].offsetLeft * -1; } else { - if (options.centerMode) { + 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 { @@ -550,7 +555,7 @@ export function lory (slider, opts) { const direction = delta.x < 0; if (!isScrolling) { - if ((isValid && !isOutOfBounds) || options.centerMode) { + if ((isValid && !isOutOfBounds) || options.centerMode.enableCenterMode) { slide(false, direction); } else { translate(position.x, options.snapBackSpeed); diff --git a/static/app.css b/static/app.css index 688d606..b300243 100644 --- a/static/app.css +++ b/static/app.css @@ -403,8 +403,8 @@ footer { .centermode li{ /* width: 220px; margin-right: 40px; */ - /* width: 420px; - margin-right: 40px; */ - width: 600px; - margin-right: 13px + width: 420px; + margin-right: 40px; + /* width: 600px; + margin-right: 13px */ } From af595f2d47b71984f67ebe85d65a124df8d2c60e Mon Sep 17 00:00:00 2001 From: Nishant Joshi Date: Fri, 14 Jun 2019 12:56:58 +0530 Subject: [PATCH 7/9] fixed maxOffset calculation to avoid extra clicking on next-prev --- src/lory.js | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/src/lory.js b/src/lory.js index 7dd1a5a..cac715b 100755 --- a/src/lory.js +++ b/src/lory.js @@ -136,7 +136,6 @@ export function lory (slider, opts) { } = options; let duration = slideSpeed; - let centerModeFirstSlide = false; const nextSlide = direction ? index + 1 : index - 1; @@ -173,9 +172,7 @@ export function lory (slider, opts) { nextIndex = Math.min(Math.max(nextIndex, 0), slides.length - 1); - let slideStyle = slides[nextIndex].currentStyle || window.getComputedStyle(slides[nextIndex]); - let slideMarginPadding = parseFloat(slideStyle.marginLeft) + parseFloat(slideStyle.marginRight) + parseFloat(slideStyle.paddingLeft) + parseFloat(slideStyle.paddingRight); - const maxOffset = (options.centerMode.enableCenterMode) ? Math.round(slidesWidth - frameWidth) + (frameWidth / 2) + slideMarginPadding : Math.round(slidesWidth - frameWidth); + const maxOffset = (options.centerMode.enableCenterMode) ? Math.round(slidesWidth - frameWidth) + (frameWidth / 2) + (slides[0].offsetLeft * -1) + (frameWidth / 2) - (slides[0].clientWidth / 2) : Math.round(slidesWidth - frameWidth); if (infinite && direction === undefined) { nextIndex += infinite; @@ -189,13 +186,7 @@ export function lory (slider, opts) { let nextOffset; if (options.centerMode.enableCenterMode) { - if (!direction) { - nextOffset = (slides[index].offsetLeft * -1) + (frameWidth / 2) - (slides[index].clientWidth / 2); - centerModeFirstSlide = (index === nextIndex); - } else { - nextOffset = (slides[nextIndex].offsetLeft * -1) + (frameWidth / 2) - (slides[nextIndex].clientWidth / 2); - } - + 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); @@ -250,12 +241,8 @@ export function lory (slider, opts) { * update classes for next and prev arrows * based on user settings */ - if (prevCtrl && !infinite && !rewindPrev) { - if (!options.centerMode.enableCenterMode && nextIndex === 0) { - prevCtrl.classList.add(classNameDisabledPrevCtrl); - } else if (options.centerMode.enableCenterMode && centerModeFirstSlide) { - prevCtrl.classList.add(classNameDisabledPrevCtrl); - } + if (prevCtrl && !infinite && !rewindPrev && nextIndex === 0) { + prevCtrl.classList.add(classNameDisabledPrevCtrl); } if (nextCtrl && !infinite && !rewind && ((nextIndex + 1) === slides.length)) { From c3c17c17ea681dfd0088801a6019e3ed16b3583d Mon Sep 17 00:00:00 2001 From: Nishant Joshi Date: Fri, 14 Jun 2019 13:25:20 +0530 Subject: [PATCH 8/9] refactoring code --- src/index-original.html | 1139 --------------------------------------- src/lory.js | 6 +- 2 files changed, 2 insertions(+), 1143 deletions(-) delete mode 100644 src/index-original.html diff --git a/src/index-original.html b/src/index-original.html deleted file mode 100644 index d5e76bf..0000000 --- a/src/index-original.html +++ /dev/null @@ -1,1139 +0,0 @@ - - - - - - lory - - - - - - - - - - -

        Multiple slides to scroll with CenterMode, first slide non center

        - -
        -
        -
          -
        • 1
          • -
        • 2
          • -
        • 3
          • -
        • 4
          • -
        • 5
          • -
        -
        - - - - - - - - - - - - - - - - -
        - -
        - 
        
-                document.addEventListener('DOMContentLoaded', function () {
-                    var centerModeSlides = document.querySelector('.js_centermode');
-            
-                    lory(centerModeSlides, {
-                        centerMode: true,
-                        slidesToScroll: 1,
-                        enableMouseEvents: true
-                    });
-                });
-            
-
        -
        -
        -
        - Fork me on GitHub -
        - -
        - -

        Touch enabled minimalistic slider written in vanilla JavaScript

        -

        Hardware accelerated transitions

        -

        Usable as a jQuery plugin

        -

        Options for custom easing effects

        -

        infinite looping ~ carousel

        -

        No compromises for fallbacks

        -

        Written in ecmascript 6

        -

        Using webpack, babel & eslint for development

        - - Download Here - -

        or via cdn from cdnjs

        - -
        -
        -

        Prerequisited Html structure
        Class names can be changed through options

        - - 
        
-            <div class="slider js_slider">
-                <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>
-                    </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>
-
        -
        - -
        -

        Prerequisited CSS styles

        - - 
        
-            /**
-             * (optional) define here the style definitions which should be applied on the slider container
-             * e.g. width including further controls like arrows etc.
-             */
-            .slider {}
-
-            .frame {
-                /**
-                 * (optional) wrapper width, specifies width of the slider frame.
-                 */
-                width: 880px;
-
-                position: relative;
-                font-size: 0;
-                line-height: 0;
-                overflow: hidden;
-                white-space: nowrap;
-            }
-
-            .slides {
-                display: inline-block;
-            }
-
-            li {
-                position: relative;
-                display: inline-block;
-
-                /**
-                 * (optional) if the content inside the slide element has a defined size.
-                 */
-                width: 880px;
-            }
-
-            .prev, .next {
-                position: absolute;
-                top: 50%;
-                margin-top: -25px;
-                display: block;
-                cursor: pointer;
-            }
-
-            .next {
-                right: 0;
-            }
-
-            .prev {
-                left: 0;
-            }
-
-            .next svg, .prev svg {
-                width: 25px;
-            }
-
        -
        -
        - -
        -

        Single element - Fixed width [infinite]

        - -
        -
        -
          -
        • 1
          • -
        • 2
          • -
        • 3
          • -
        • 4
          • -
        • 5
          • -
        • 6
          • -
        -
        - - - - - - - - - - - - - - - - -
        - -
        - 
        
-    document.addEventListener('DOMContentLoaded', function () {
-        var simple = document.querySelector('.js_simple');
-
-        lory(simple, {
-            infinite: 1
-        });
-    });
-
-
        -
        - -

        Single element - Percentage width [infinite]

        - -
        -
        -
          -
        • 1
          • -
        • 2
          • -
        • 3
          • -
        • 4
          • -
        • 5
          • -
        • 6
          • -
        -
        - - - - - - - - - - - - - - - - -
        - -
        - 
        
-    document.addEventListener('DOMContentLoaded', function () {
-        var percentage = document.querySelector('.js_percentage');
-
-        lory(percentage, {
-            infinite: 1
-        });
-    });
-
-
        -
        - -

        Single element - Fixed width [rewind]

        - -
        -
        -
          -
        • 1
          • -
        • 2
          • -
        • 3
          • -
        • 4
          • -
        • 5
          • -
        • 6
          • -
        -
        - - - - - - - - - - - - - - - - -
        - -
        - 
        
-    document.addEventListener('DOMContentLoaded', function () {
-        var rewind = document.querySelector('.js_rewind');
-
-        lory(rewind, {
-            rewind: true
-        });
-    });
-
-
        -
        - -

        Single element - dot navigation

        - -
        -
        -
          -
        • 1
          • -
        • 2
          • -
        • 3
          • -
        • 4
          • -
        • 5
          • -
        • 6
          • -
        -
        - - - - - - - - - - - - - - - - - -
          -
          - -
          - 
          
-    document.addEventListener('DOMContentLoaded', function () {
-        var simple_dots       = document.querySelector('.js_simple_dots');
-        var dot_count         = simple_dots.querySelectorAll('.js_slide').length;
-        var dot_container     = simple_dots.querySelector('.js_dots');
-        var dot_list_item     = document.createElement('li');
-
-        function handleDotEvent(e) {
-            if (e.type === 'before.lory.init') {
-              for (var i = 0, len = dot_count; i < len; i++) {
-                var clone = dot_list_item.cloneNode();
-                dot_container.appendChild(clone);
-              }
-              dot_container.childNodes[0].classList.add('active');
-            }
-            if (e.type === 'after.lory.init') {
-              for (var i = 0, len = dot_count; i < len; i++) {
-                dot_container.childNodes[i].addEventListener('click', function(e) {
-                  dot_navigation_slider.slideTo(Array.prototype.indexOf.call(dot_container.childNodes, e.target));
-                });
-              }
-            }
-            if (e.type === 'after.lory.slide') {
-              for (var i = 0, len = dot_container.childNodes.length; i < len; i++) {
-                dot_container.childNodes[i].classList.remove('active');
-              }
-              dot_container.childNodes[e.detail.currentSlide - 1].classList.add('active');
-            }
-            if (e.type === 'on.lory.resize') {
-                for (var i = 0, len = dot_container.childNodes.length; i < len; i++) {
-                    dot_container.childNodes[i].classList.remove('active');
-                }
-                dot_container.childNodes[0].classList.add('active');
-            }
-        }
-        simple_dots.addEventListener('before.lory.init', handleDotEvent);
-        simple_dots.addEventListener('after.lory.init', handleDotEvent);
-        simple_dots.addEventListener('after.lory.slide', handleDotEvent);
-        simple_dots.addEventListener('on.lory.resize', handleDotEvent);
-
-        var dot_navigation_slider = lory(simple_dots, {
-            infinite: 1,
-            enableMouseEvents: true
-        });
-    });
-
-
          -
          - -

          Single element - Percentage width [rewind]

          - -
          -
          -
            -
          • 1
            • -
          • 2
            • -
          • 3
            • -
          • 4
            • -
          • 5
            • -
          • 6
            • -
          -
          - - - - - - - - - - - - - - - - -
          - -
          - 
          
-    document.addEventListener('DOMContentLoaded', function () {
-        var rewind_percentage = document.querySelector('.js_rewind_percentage');
-
-        lory(rewind_percentage, {
-            rewind: true
-        });
-    });
-
-
          -
          - -

          Variable width

          - -
          -
          -
            -
          • 220
            • -
          • 190
            • -
          • 150
            • -
          • 130
            • -
          • 250
            • -
          • 180
            • -
          • 200
            • -
          • 140
            • -
          • 120
            • -
          • 240
            • -
          -
          - - - - - - - - - - - - - - - - -
          - -
          - 
          
-    document.addEventListener('DOMContentLoaded', function () {
-        var variableWidth = document.querySelector('.js_variablewlidth');
-
-        lory(variableWidth, {
-            rewind: true
-        });
-    });
-
-
          -
          - - - -

          Multiple slides to scroll

          - -
          -
          -
            -
          • 1
            • -
          • 2
            • -
          • 3
            • -
          • 4
            • -
          • 5
            • -
          • 6
            • -
          • 7
            • -
          • 8
            • -
          • 9
            • -
          • 10
            • -
          • 11
            • -
          • 12
            • -
          -
          - - - - - - - - - - - - - - - - -
          - -
          - 
          
-    document.addEventListener('DOMContentLoaded', function () {
-        var multiSlides = document.querySelector('.js_multislides');
-
-        lory(multiSlides, {
-            infinite: 4,
-            slidesToScroll: 4
-        });
-    });
-
-
          -
          - -

          Custom easings

          - -
          -
          -
            -
          • 1
            • -
          • 2
            • -
          • 3
            • -
          • 4
            • -
          • 5
            • -
          • 6
            • -
          • 7
            • -
          • 8
            • -
          • 9
            • -
          • 10
            • -
          • 11
            • -
          • 12
            • -
          -
          - - - - - - - - - - - - - - - - -
          - -
          - 
          
-    document.addEventListener('DOMContentLoaded', function () {
-        var ease = document.querySelector('.js_ease');
-
-        // http://easings.net/
-
-        lory(ease, {
-            infinite: 4,
-            slidesToScroll: 4,
-            slideSpeed: 1000,
-            ease: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
-        });
-    });
-
-
          -
          - -

          Showing events

          - -
          -
          -
            -
          • 1
            • -
          • 2
            • -
          • 3
            • -
          • 4
            • -
          • 5
            • -
          • 6
            • -
          -
          - - - - - - - - - - - - - - - - -
          - - -
          - 
          
-    document.addEventListener('DOMContentLoaded', function () {
-        var events = document.querySelector('.js_events');
-
-        function handleEvent(e) {
-            var newSpan = document.createElement('span');
-            var time = new Date();
-            time = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds() + ',' + time.getMilliseconds();
-            var newContent = document.createTextNode('[' + time + '] Event dispatched: "' + e.type + '"');
-            newSpan.appendChild(newContent);
-            e.target.nextElementSibling.appendChild(newSpan);
-        }
-
-        events.addEventListener('before.lory.init', handleEvent);
-        events.addEventListener('after.lory.init', handleEvent);
-        events.addEventListener('before.lory.slide', handleEvent);
-        events.addEventListener('after.lory.slide', handleEvent);
-        events.addEventListener('before.lory.destroy', handleEvent);
-        events.addEventListener('after.lory.destroy', handleEvent);
-
-        events.addEventListener('on.lory.resize', handleEvent);
-        events.addEventListener('on.lory.touchend', handleEvent);
-        events.addEventListener('on.lory.touchmove', handleEvent);
-        events.addEventListener('on.lory.touchstart', handleEvent);
-
-        lory(events, {
-            infinite: 1
-        });
-    });
-
-
          -
          - -
          - -
          -

          initialize multiple similiar sliders

          - -
          - 
          
-        'use strict';
-
-        document.addEventListener('DOMContentLoaded', function () {
-            Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index) {
-                lory(element, {});
-            });
-        });
-
-
          -
          - -
          - -
          -

          Consume it as a commonJS module

          - -
          - 
          
-    "use strict";
-
-    var lory = require('lory.js').lory;
-
-    document.addEventListener('DOMContentLoaded', function() {
-        var slider = document.querySelector('.js_slider');
-
-        lory(slider, {
-            // options going here
-        });
-    });
-
-
          -
          - -
          - -
          -

          Consume it as an ES2015 module

          - -
          - 
          
-    import {lory} from 'lory.js';
-
-    document.addEventListener('DOMContentLoaded', () => {
-        const slider = document.querySelector('.js_slider');
-
-        lory(slider, {
-            // options going here
-        });
-    });
-
-
          -
          - -
          -

          Use it as a jQuery Plugin

          - -
          - 
          
-        <script src="js/jquery.lory.min.js"></script>
-
          -
          - -
          - 
          
-        'use strict';
-
-        var $elements = $('.js_simple');
-
-        $(function() {
-            $elements.lory({
-                infinite: 1
-            });
-
-            $elements.data().lory.slideTo(4);
-            // $elements.data().lory.prev();
-            // $elements.data().lory.next();
-        });
-
-
          -
          - -
          - -
          -

          Local development

          - -
          - 
          
-        // To install dev dependencies run:
-
-        yarn install
-
-        // To start the development server run:
-
-        yarn run dev
-
-        // To lint your code run:
-
-        yarn run lint
-
-        // To make a full new build run:
-
-        yarn run build
-
-
          -
          -
          - - -
          -

          Run tests

          - -
          - 
          
-        // To install dev dependencies run:
-
-        yarn install
-
-        // To start the karma tests locally run:
-
-        yarn run karma-local
-
-
          -
          - - -
          - -
          -

          Public API

          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          prev:slides to the previous slide
          next:slides to the next slide
          slideTo:slides to the index given as an argument: (arguments: index {number})
          returnIndex:returns the index of the current slide element
          setup:binds eventlisteners, merging default and user options, setup the slides based on DOM (called - once during initialisation)Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.
          reset:sets the slider back to the starting position and resets the current index (called on Resize - event)
          destroy:unmount/destroy the instance of lory
          -
          - -
          -

          Options

          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          slidesToScrollslides scrolled at oncedefault: 1
          enableMouseEventsenabled mouse eventsdefault: false
          infinitelike carousel, works with multiple slides. (do not combine with rewind)default: false (number of visible slides)
          rewindif slider reached the last slide, with next click the slider goes back to the startindex. (do - not combine with infinite)default: false
          slideSpeedtime in milliseconds for the animation of a valid slide attemptdefault: 300
          rewindSpeedtime in milliseconds for the animation of the rewind after the last slidedefault: 600
          snapBackSpeedtime for the snapBack of the slider if the slide attempt was not validdefault: 200
          easecubic bezier easing functions: http://easings.net/dedefault: 'ease'
          classNameFrameclass name for slider framedefault: 'js_frame'
          classNameSlideContainerclass name for slides containerdefault: 'js_slides'
          classNamePrevCtrlclass name for slider previous controldefault: 'js_prev'
          classNameNextCtrlclass name for slider next controldefault: 'js_next'
          -
          - -
          -

          Events

          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          before.lory.initfires before initialisation (first in setup function)
          after.lory.initfires after initialisation (end of setup function)
          before.lory.slidearguments: currentSlide, nextSlidefires before slide change
          after.lory.slidearguments: currentSlidefires after slide change
          before.lory.destroyfires before the slider instance gets destroyed
          after.lory.destroyfires after the slider instance gets destroyed
          on.lory.resizefires on every resize event
          on.lory.touchstartfires on every slider touchstart event
          on.lory.touchmovefires on every slider touchmove event
          on.lory.touchendfires on every slider touchend event
          -
          - -
          - Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT license -
          - - - - - - - - - \ No newline at end of file diff --git a/src/lory.js b/src/lory.js index cac715b..04740f1 100755 --- a/src/lory.js +++ b/src/lory.js @@ -136,8 +136,10 @@ export function lory (slider, opts) { } = options; let duration = slideSpeed; + let nextOffset; const nextSlide = direction ? index + 1 : index - 1; + const maxOffset = (options.centerMode.enableCenterMode) ? Math.round(slidesWidth - frameWidth) + (frameWidth / 2) + (slides[0].offsetLeft * -1) + (frameWidth / 2) - (slides[0].clientWidth / 2) : Math.round(slidesWidth - frameWidth); dispatchSliderEvent('before', 'slide', { index, @@ -172,8 +174,6 @@ export function lory (slider, opts) { nextIndex = Math.min(Math.max(nextIndex, 0), slides.length - 1); - const maxOffset = (options.centerMode.enableCenterMode) ? Math.round(slidesWidth - frameWidth) + (frameWidth / 2) + (slides[0].offsetLeft * -1) + (frameWidth / 2) - (slides[0].clientWidth / 2) : Math.round(slidesWidth - frameWidth); - if (infinite && direction === undefined) { nextIndex += infinite; } @@ -183,8 +183,6 @@ export function lory (slider, opts) { duration = rewindSpeed; } - let nextOffset; - 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; From 1e3857de1640e8b87abc8f93e4ac5ab7e53414bf Mon Sep 17 00:00:00 2001 From: Nishant Joshi Date: Fri, 8 Nov 2019 11:35:35 +0530 Subject: [PATCH 9/9] code refactor and review comments fix suggested by Allan --- README.md | 4 +- src/defaults.js | 7 +- src/index.html | 1140 ++++++++++++++++++++--------------------------- src/lory.js | 59 +-- static/app.css | 15 +- 5 files changed, 531 insertions(+), 694 deletions(-) diff --git a/README.md b/README.md index ce24bcd..9249041 100644 --- a/README.md +++ b/README.md @@ -322,8 +322,8 @@ li { centerMode - enable centerMode with an additional option to make first slide left align - default: { enableCenterMode: false, firstSlideLeftAlign: false } + 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) + default: {enableCenterMode: false, firstSlideLeftAlign: false} diff --git a/src/defaults.js b/src/defaults.js index 1931f69..6f0cb8f 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -100,8 +100,9 @@ export default { rewindOnResize: true, /** - * If true, enable centerMode - * @centerMode {boolean} + * 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 } + centerMode: {enableCenterMode: false, firstSlideLeftAlign: false} }; diff --git a/src/index.html b/src/index.html index 62c35d6..a73750b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,40 +1,39 @@ + + + + lory + + + + + + + + + +
          +
          + Fork me on GitHub +
          + +
          + +

          Touch enabled minimalistic slider written in vanilla JavaScript

          +

          Hardware accelerated transitions

          +

          Usable as a jQuery plugin

          +

          Options for custom easing effects

          +

          infinite looping ~ carousel

          +

          No compromises for fallbacks

          +

          Written in ecmascript 6

          +

          Using webpack, babel & eslint for development

          + + Download Here - - - - lory - - - - - - - - - -
          -
          - Fork me on GitHub -
          - -
          - -

          Touch enabled minimalistic slider written in vanilla JavaScript

          -

          Hardware accelerated transitions

          -

          Usable as a jQuery plugin

          -

          Options for custom easing effects

          -

          infinite looping ~ carousel

          -

          No compromises for fallbacks

          -

          Written in ecmascript 6

          -

          Using webpack, babel & eslint for development

          - - Download Here - -

          or via cdn from cdnjs

          - -
          -
          +

          or via cdn from cdnjs

          + +
          +

          Prerequisited Html structure
          Class names can be changed through options

          
@@ -56,10 +55,9 @@ 
          Prerequisited Html structure
          Class names can be changed throug
                     <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>
-
          -
          +
          -
          +

          Prerequisited CSS styles

          
@@ -115,46 +113,34 @@ 
          Prerequisited CSS styles
          
             .next svg, .prev svg {
                 width: 25px;
             }
-
          -
          -
          - -
          -

          Single element - Fixed width [infinite]

          - -
          -
          -
            -
          • 1
            • -
          • 2
            • -
          • 3
            • -
          • 4
            • -
          • 5
            • -
          • 6
            • -
          +
          +
          + +
          +

          Single element - Fixed width [infinite]

          + +
          +
          +
            +
          • 1
            • +
          • 2
            • +
          • 3
            • +
          • 4
            • +
          • 5
            • +
          • 6
            • +
          +
          + + + + + + + +
          - - - - - - - - - - - - - - - - - -
          - 
          
+
          
     document.addEventListener('DOMContentLoaded', function () {
         var simple = document.querySelector('.js_simple');
 
@@ -163,44 +149,32 @@ 
          Single element - Fixed width [infinite]
          
         });
     });
 
-
          
-        
          
-
-        
          Single element - Percentage width [infinite]
          
-
-        
          
-            
          
-                
            
-                    
          • 1
            • 
-                    
          • 2
            • 
-                    
          • 3
            • 
-                    
          • 4
            • 
-                    
          • 5
            • 
-                    
          • 6
            • 
-                
          
+
          + +

          Single element - Percentage width [infinite]

          + +
          +
          +
            +
          • 1
            • +
          • 2
            • +
          • 3
            • +
          • 4
            • +
          • 5
            • +
          • 6
            • +
          +
          + + + + + + + +
          - - - - - - - - - - - - - - - - - -
          - 
          
+
          
     document.addEventListener('DOMContentLoaded', function () {
         var percentage = document.querySelector('.js_percentage');
 
@@ -209,44 +183,32 @@ 
          Single element - Percentage width [infinite]
          
         });
     });
 
-
          
-        
          
-
-        
          Single element - Fixed width [rewind]
          
-
-        
          
-            
          
-                
            
-                    
          • 1
            • 
-                    
          • 2
            • 
-                    
          • 3
            • 
-                    
          • 4
            • 
-                    
          • 5
            • 
-                    
          • 6
            • 
-                
          
+
          + +

          Single element - Fixed width [rewind]

          + +
          +
          +
            +
          • 1
            • +
          • 2
            • +
          • 3
            • +
          • 4
            • +
          • 5
            • +
          • 6
            • +
          +
          + + + + + + + +
          - - - - - - - - - - - - - - - - - -
          - 
          
+
          
     document.addEventListener('DOMContentLoaded', function () {
         var rewind = document.querySelector('.js_rewind');
 
@@ -255,46 +217,34 @@ 
          Single element - Fixed width [rewind]
          
         });
     });
 
-
          
-        
          
-
-        
          Single element - dot navigation
          
-
-        
          
-            
          
-                
            
-                    
          • 1
            • 
-                    
          • 2
            • 
-                    
          • 3
            • 
-                    
          • 4
            • 
-                    
          • 5
            • 
-                    
          • 6
            • 
-                
          
+
          + +

          Single element - dot navigation

          + +
          +
          +
            +
          • 1
            • +
          • 2
            • +
          • 3
            • +
          • 4
            • +
          • 5
            • +
          • 6
            • +
          +
          + + + + + + + + + +
            - - - - - - - - - - - - - - - - -
              - - -
              - 
              
+
              
     document.addEventListener('DOMContentLoaded', function () {
         var simple_dots       = document.querySelector('.js_simple_dots');
         var dot_count         = simple_dots.querySelectorAll('.js_slide').length;
@@ -340,44 +290,32 @@ 
              Single element - dot navigation
              
         });
     });
 
-
              
-        
              
-
-        
              Single element - Percentage width [rewind]
              
-
-        
              
-            
              
-                
                
-                    
              • 1
                • 
-                    
              • 2
                • 
-                    
              • 3
                • 
-                    
              • 4
                • 
-                    
              • 5
                • 
-                    
              • 6
                • 
-                
              
+
              + +

              Single element - Percentage width [rewind]

              + +
              +
              +
                +
              • 1
                • +
              • 2
                • +
              • 3
                • +
              • 4
                • +
              • 5
                • +
              • 6
                • +
              +
              + + + + + + + +
              - - - - - - - - - - - - - - - - - -
              - 
              
+
              
     document.addEventListener('DOMContentLoaded', function () {
         var rewind_percentage = document.querySelector('.js_rewind_percentage');
 
@@ -386,48 +324,36 @@ 
              Single element - Percentage width [rewind]
              
         });
     });
 
-
              
-        
              
-
-        
              Variable width
              
-
-        
              
-            
              
-                
                
-                    
              • 220
                • 
-                    
              • 190
                • 
-                    
              • 150
                • 
-                    
              • 130
                • 
-                    
              • 250
                • 
-                    
              • 180
                • 
-                    
              • 200
                • 
-                    
              • 140
                • 
-                    
              • 120
                • 
-                    
              • 240
                • 
-                
              
+
              + +

              Variable width

              + +
              +
              +
                +
              • 220
                • +
              • 190
                • +
              • 150
                • +
              • 130
                • +
              • 250
                • +
              • 180
                • +
              • 200
                • +
              • 140
                • +
              • 120
                • +
              • 240
                • +
              +
              + + + + + + + +
              - - - - - - - - - - - - - - - - - -
              - 
              
+
              
     document.addEventListener('DOMContentLoaded', function () {
         var variableWidth = document.querySelector('.js_variablewlidth');
 
@@ -436,154 +362,114 @@ 
              Variable width
              
         });
     });
 
-
              
-        
              
-
-        
              Center Mode
              
-
-        
              
-            
              
-                
                
-                    
              • 1
                • 
-                    
              • 2
                • 
-                    
              • 3
                • 
-                    
              • 4
                • 
-                    
              • 5
                • 
-                    
              • 6
                • 
-                    
              • 7
                • 
-                    
              • 8
                • 
-                    
              • 9
                • 
-                    
              • 10
                • 
-                
              
+
              + +

              Center Mode

              + +
              +
              +
                +
              • 220
                • +
              • 190
                • +
              • 150
                • +
              • 130
                • +
              • 250
                • +
              • 180
                • +
              • 200
                • +
              • 140
                • +
              • 120
                • +
              • 240
                • +
              +
              + + + + + + + +
              - - - - - - - - - - - - - - - - - -
              - 
              
-            document.addEventListener('DOMContentLoaded', function () {
-                var centerModeSlides = document.querySelector('.js_centermode');
-        
-                lory(centerModeSlides, {
-                    centerMode: { enableCenterMode: true },
-                    slidesToScroll: 1,
-                    enableMouseEvents: true
-                });
-            });
-        
-
              -
              - -

              Center Mode :: First Slide Left Align

              - -
              -
              -
                -
              • 1
                • -
              • 2
                • -
              • 3
                • -
              • 4
                • -
              • 5
                • -
              • 6
                • -
              • 7
                • -
              • 8
                • -
              • 9
                • -
              • 10
                • -
              +
              
+    document.addEventListener('DOMContentLoaded', function () {
+        var centerModeSlides = document.querySelector('.js_centermode');
+
+        lory(centerModeSlides, {
+            centerMode: { enableCenterMode: true }
+        });
+    });
+
+
              + +

              Center Mode - First Slide Left Align

              + +
              +
              +
                +
              • 1
                • +
              • 2
                • +
              • 3
                • +
              • 4
                • +
              • 5
                • +
              • 6
                • +
              • 7
                • +
              • 8
                • +
              • 9
                • +
              • 10
                • +
              +
              + + + + + + + +
              - - - - - - - - - - - - - - - -
              - -
              - 
              
-                    document.addEventListener('DOMContentLoaded', function () {
-                        var centerModeSlides = document.querySelector('.js_centermode');
-                
-                        lory(centerModeFirstSlideLeftAlign, {
-                            centerMode: { enableCenterMode: true, firstSlideLeftAlign: true },
-                            slidesToScroll: 1,
-                            enableMouseEvents: true
-                        });
-                    });
-                
-
              -
              - -

              Multiple slides to scroll

              - -
              -
              -
                -
              • 1
                • -
              • 2
                • -
              • 3
                • -
              • 4
                • -
              • 5
                • -
              • 6
                • -
              • 7
                • -
              • 8
                • -
              • 9
                • -
              • 10
                • -
              • 11
                • -
              • 12
                • -
              +
              
+    document.addEventListener('DOMContentLoaded', function () {
+        var centerModeFirstSlideLeftAlign = document.querySelector('.js_centermode');
+
+        lory(centerModeFirstSlideLeftAlign, {
+            centerMode: { enableCenterMode: true, firstSlideLeftAlign: true }
+        });
+    });
+
+
              + +

              Multiple slides to scroll

              + +
              +
              +
                +
              • 1
                • +
              • 2
                • +
              • 3
                • +
              • 4
                • +
              • 5
                • +
              • 6
                • +
              • 7
                • +
              • 8
                • +
              • 9
                • +
              • 10
                • +
              • 11
                • +
              • 12
                • +
              +
              + + + + + + + +
              - - - - - - - - - - - - - - - -
              - -
              - 
              
+
              
     document.addEventListener('DOMContentLoaded', function () {
         var multiSlides = document.querySelector('.js_multislides');
 
@@ -593,50 +479,38 @@ 
              Multiple slides to scroll
              
         });
     });
 
-
              
-        
              
-
-        
              Custom easings
              
-
-        
              
-            
              
-                
                
-                    
              • 1
                • 
-                    
              • 2
                • 
-                    
              • 3
                • 
-                    
              • 4
                • 
-                    
              • 5
                • 
-                    
              • 6
                • 
-                    
              • 7
                • 
-                    
              • 8
                • 
-                    
              • 9
                • 
-                    
              • 10
                • 
-                    
              • 11
                • 
-                    
              • 12
                • 
-                
              
+
              + +

              Custom easings

              + +
              +
              +
                +
              • 1
                • +
              • 2
                • +
              • 3
                • +
              • 4
                • +
              • 5
                • +
              • 6
                • +
              • 7
                • +
              • 8
                • +
              • 9
                • +
              • 10
                • +
              • 11
                • +
              • 12
                • +
              +
              + + + + + + + +
              - - - - - - - - - - - - - - - -
              - -
              - 
              
+
              
     document.addEventListener('DOMContentLoaded', function () {
         var ease = document.querySelector('.js_ease');
 
@@ -650,45 +524,33 @@ 
              Custom easings
              
         });
     });
 
-
              
-        
              
-
-        
              Showing events
              
-
-        
              
-            
              
-                
                
-                    
              • 1
                • 
-                    
              • 2
                • 
-                    
              • 3
                • 
-                    
              • 4
                • 
-                    
              • 5
                • 
-                    
              • 6
                • 
-                
              
+
              + +

              Showing events

              + +
              +
              +
                +
              • 1
                • +
              • 2
                • +
              • 3
                • +
              • 4
                • +
              • 5
                • +
              • 6
                • +
              +
              + + + + + + + +
              + - - - - - - - - - - - - - - - -
              - - -
              - 
              
+
              
     document.addEventListener('DOMContentLoaded', function () {
         var events = document.querySelector('.js_events');
 
@@ -718,16 +580,14 @@ 
              Showing events
              
         });
     });
 
-
              
-        
              
+
              -
              +
              -
              -

              initialize multiple similiar sliders

              +
              +

              initialize multiple similiar sliders

              -
              - 
              
+
              
         'use strict';
 
         document.addEventListener('DOMContentLoaded', function () {
@@ -736,16 +596,14 @@ 
              initialize multiple similiar sliders
              
             });
         });
 
-
              
-        
              
+
              -
              +
              -
              -

              Consume it as a commonJS module

              +
              +

              Consume it as a commonJS module

              -
              - 
              
+
              
     "use strict";
 
     var lory = require('lory.js').lory;
@@ -758,16 +616,14 @@ 
              Consume it as a commonJS module
              
         });
     });
 
-
              
-        
              
+
              -
              +
              -
              -

              Consume it as an ES2015 module

              +
              +

              Consume it as an ES2015 module

              -
              - 
              
+
              
     import {lory} from 'lory.js';
 
     document.addEventListener('DOMContentLoaded', () => {
@@ -778,20 +634,16 @@ 
              Consume it as an ES2015 module
              
         });
     });
 
-
              
-        
              
+
              -
              -

              Use it as a jQuery Plugin

              +
              +

              Use it as a jQuery Plugin

              -
              - 
              
+
              
         <script src="js/jquery.lory.min.js"></script>
-
              
-            
              
+
              -
              - 
              
+
              
         'use strict';
 
         var $elements = $('.js_simple');
@@ -806,16 +658,14 @@ 
              Use it as a jQuery Plugin
              
             // $elements.data().lory.next();
         });
 
-
              
-            
              
+
              -
              +

              Local development

              -
              - 
              
+
              
         // To install dev dependencies run:
 
         yarn install
@@ -832,16 +682,14 @@ 
              Local development
              
 
         yarn run build
 
-
              
-            
              
+

              Run tests

              -
              - 
              
+
              
         // To install dev dependencies run:
 
         yarn install
@@ -850,10 +698,9 @@ 
              Run tests
              
 
         yarn run karma-local
 
-
              
-            
              
+
              - +
              @@ -877,14 +724,12 @@

              Public API

              setup: - binds eventlisteners, merging default and user options, setup the slides based on DOM (called - once during initialisation) + binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation) Call setup if DOM or user options have changed or eventlisteners needs to be rebinded. reset: - sets the slider back to the starting position and resets the current index (called on Resize - event) + sets the slider back to the starting position and resets the current index (called on Resize event) destroy: @@ -913,8 +758,7 @@

              Options

              rewind - if slider reached the last slide, with next click the slider goes back to the startindex. (do - not combine with infinite) + if slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite) default: false @@ -959,8 +803,8 @@

              Options

              centerMode - enable centerMode with an additional option to make first slide left align - default: { enableCenterMode: false, firstSlideLeftAlign: false } + 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) + default: {enableCenterMode: false, firstSlideLeftAlign: false}
              @@ -1017,145 +861,141 @@

              Events

              Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT license - - - - - - + - var multiSlides = document.querySelector('.js_multislides'); + - - \ No newline at end of file + + diff --git a/src/lory.js b/src/lory.js index 04740f1..0361b50 100755 --- a/src/lory.js +++ b/src/lory.js @@ -23,7 +23,7 @@ export function lory (slider, opts) { let prefixes; let transitionEndCallback; - let index = 0; + let index = 0; let options = {}; let touchEventParams = supportsPassive() ? { passive: true } : false; @@ -39,7 +39,7 @@ export function lory (slider, opts) { * set active class to element which is the current slide */ function setActiveElement (slides, currentIndex) { - const { classNameActiveSlide } = options; + const {classNameActiveSlide} = options; slides.forEach((element, index) => { if (element.classList.contains(classNameActiveSlide)) { @@ -58,10 +58,10 @@ export function lory (slider, opts) { * @return {array} array of updated slideContainer elements */ function setupInfinite (slideArray) { - const { infinite } = options; + const {infinite} = options; const front = slideArray.slice(0, infinite); - const back = slideArray.slice(slideArray.length - infinite, slideArray.length); + const back = slideArray.slice(slideArray.length - infinite, slideArray.length); front.forEach(function (element) { const cloned = element.cloneNode(true); @@ -139,7 +139,7 @@ export function lory (slider, opts) { let nextOffset; const nextSlide = direction ? index + 1 : index - 1; - const maxOffset = (options.centerMode.enableCenterMode) ? Math.round(slidesWidth - frameWidth) + (frameWidth / 2) + (slides[0].offsetLeft * -1) + (frameWidth / 2) - (slides[0].clientWidth / 2) : Math.round(slidesWidth - frameWidth); + const maxOffset = Math.round(slidesWidth - ((options.centerMode.enableCenterMode) ? slides[0].clientWidth / 2 : frameWidth)); dispatchSliderEvent('before', 'slide', { index, @@ -158,17 +158,17 @@ export function lory (slider, opts) { if (typeof nextIndex !== 'number') { if (direction) { - if (infinite && index + (infinite * 2) !== slides.length) { - nextIndex = index + (infinite - index % infinite); - } else { - nextIndex = index + slidesToScroll; - } + if (infinite && index + (infinite * 2) !== slides.length) { + nextIndex = index + (infinite - index % infinite); + } else { + nextIndex = index + slidesToScroll; + } } else { - if (infinite && index % infinite !== 0) { - nextIndex = index - index % infinite; - } else { - nextIndex = index - slidesToScroll; - } + if (infinite && index % infinite !== 0) { + nextIndex = index - index % infinite; + } else { + nextIndex = index - slidesToScroll; + } } } @@ -183,6 +183,9 @@ export function lory (slider, opts) { duration = rewindSpeed; } + /** + * 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; @@ -260,7 +263,7 @@ export function lory (slider, opts) { dispatchSliderEvent('before', 'init'); prefixes = detectPrefixes(); - options = { ...defaults, ...opts }; + options = {...defaults, ...opts}; const { classNameFrame, @@ -327,7 +330,7 @@ export function lory (slider, opts) { * reset function: called on resize */ function reset () { - var { infinite, ease, rewindSpeed, rewindOnResize, classNameActiveSlide, initialIndex } = options; + var {infinite, ease, rewindSpeed, rewindOnResize, classNameActiveSlide, initialIndex} = options; slidesWidth = elementWidth(slideContainer); frameWidth = elementWidth(frame); @@ -350,14 +353,12 @@ export 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; - } + } 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; } if (classNameActiveSlide) { @@ -451,7 +452,7 @@ export function lory (slider, opts) { } function onTouchstart (event) { - const { enableMouseEvents } = options; + const {enableMouseEvents} = options; const touches = event.touches ? event.touches[0] : event; if (enableMouseEvents) { @@ -463,7 +464,7 @@ export function lory (slider, opts) { frame.addEventListener('touchmove', onTouchmove, touchEventParams); frame.addEventListener('touchend', onTouchend); - const { pageX, pageY } = touches; + const {pageX, pageY} = touches; touchOffset = { x: pageX, @@ -482,7 +483,7 @@ export function lory (slider, opts) { function onTouchmove (event) { const touches = event.touches ? event.touches[0] : event; - const { pageX, pageY } = touches; + const {pageX, pageY} = touches; delta = { x: pageX - touchOffset.x, @@ -540,7 +541,7 @@ export function lory (slider, opts) { const direction = delta.x < 0; if (!isScrolling) { - if ((isValid && !isOutOfBounds) || options.centerMode.enableCenterMode) { + if (isValid && !isOutOfBounds) { slide(false, direction); } else { translate(position.x, options.snapBackSpeed); diff --git a/static/app.css b/static/app.css index b300243..b822392 100644 --- a/static/app.css +++ b/static/app.css @@ -252,6 +252,11 @@ footer { margin-right: 10px; } +.centermode li { + width: 340px; + margin-right: 10px; +} + .simple > .frame li:last-child, .rewind > .frame li:last-child, .events > .frame li:last-child, @@ -398,13 +403,3 @@ footer { margin-right: 20px; } } - - -.centermode li{ - /* width: 220px; - margin-right: 40px; */ - width: 420px; - margin-right: 40px; - /* width: 600px; - margin-right: 13px */ -}