Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
embla-carousel
Advanced tools
embla-carousel - npm Package Compare versions
Comparing version 2.6.5 to 2.6.6
@@ -1218,10 +1218,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| function move(evt) { | ||
| if (state.preventScroll || state.isMouse) { | ||
| var diff = pointer.move(evt); | ||
| var reachedLimit = limit.reachedAny(location.get()); | ||
| var resist = !params.loop && reachedLimit ? 2 : 1; | ||
| target.addNumber(diff / resist); | ||
| evt.preventDefault(); | ||
| if (!state.preventClick && diff) state.preventClick = true; | ||
| } else { | ||
| if (!state.preventScroll && !state.isMouse) { | ||
| var X = pointer.read(evt, 'x').get(); | ||
@@ -1232,4 +1225,12 @@ var Y = pointer.read(evt, 'y').get(); | ||
| state.preventScroll = diffX > diffY; | ||
| if (!state.preventScroll && !state.preventClick) up(); | ||
| if (!state.preventScroll && !state.preventClick) return up(); | ||
| } | ||
| var diff = pointer.move(evt); | ||
| var reachedLimit = limit.reachedAny(location.get()); | ||
| var resist = !params.loop && reachedLimit ? 2 : 1; | ||
| var preventClick = !state.preventClick && diff; | ||
| if (preventClick) state.preventClick = true; | ||
| target.addNumber(diff / resist); | ||
| evt.preventDefault(); | ||
| } | ||
@@ -1236,0 +1237,0 @@ |
| { | ||
| "name": "embla-carousel", | ||
| "version": "2.6.5", | ||
| "version": "2.6.6", | ||
| "author": "David Cetinkaya", | ||
@@ -5,0 +5,0 @@ "private": false, |
305
README.md
@@ -21,3 +21,3 @@ <br /> | ||
| <p align="center"> | ||
| <p align="center" style="max-width: 700px;"> | ||
| Extensible low level carousels for the web. Extend it with basic JavaScript and build awesome physics simulated carousels. Dependency free and 100% open source. | ||
@@ -82,2 +82,5 @@ </p> | ||
| </div> | ||
| <div class="embla__slide"> | ||
| Slide 4 | ||
| </div> | ||
| </div> | ||
@@ -143,3 +146,3 @@ </div> | ||
| <div> | ||
| This option aligns the slides to the start or end edge of the carousel viewport. Slides will be centered if no value is provided. Note that slide alignments will be affected for slides at the start or end when used together with | ||
| This option aligns the slides to the start or end edge of the carousel viewport. Slides will be centered if no value is provided. Note that slide alignments will be overrided for slides at the start or end when used together with | ||
| <a href="#containscroll"> | ||
@@ -842,42 +845,280 @@ <code>containScroll</code> | ||
| ##### `containerNode()` | ||
| ##### `containerNode` | ||
| <p>Returns the current container element node.</p> | ||
| <sup> | ||
| ✨ <strong>Demo</strong> - | ||
| <a href="https://codesandbox.io/s/embla-carousel-containernode-fq9xw"><code>embla.containerNode()</code></a> | ||
| </sup> | ||
| <details> | ||
| <summary> | ||
| Grab the container node that holds the slides. | ||
| </summary> | ||
| <hr> | ||
| <div> | ||
| This API method returns the container node that holds the slides. If a custom selector is used by utilising the <a href="#containerselector"><code>containerSelector</code></a> option this will return the matching element, otherwise it will return the first immediate child of the Embla node passed to EmblaCarousel. | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <sup> | ||
| <strong>Parameters: </strong> | ||
| <code>none</code> | ||
| </sup> | ||
| </div> | ||
| <div> | ||
| <sup> | ||
| <strong>Return Type: </strong> | ||
| <code>Node.ELEMENT_NODE</code> | ||
| </sup> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <a href="https://codesandbox.io/s/embla-carousel-containernode-fq9xw"> | ||
| <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> | ||
| </a> | ||
| | ||
| <a href="https://codesandbox.io/s/embla-carousel-containernode-fq9xw"> | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </div> | ||
| <br> | ||
| <p> | ||
| <strong>Usage</strong> | ||
| </p> | ||
| ```javascript | ||
| const embla = EmblaCarousel(emblaNode, options) | ||
| const emblaContainer = embla.containerNode() | ||
| ``` | ||
| ##### `slideNodes()` | ||
| <hr> | ||
| </details> | ||
| <p>Returns the slides as an array of element nodes.</p> | ||
| <sup> | ||
| ✨ <strong>Demo</strong> - | ||
| <a href="https://codesandbox.io/s/embla-carousel-slidenodes-dsesp"><code>embla.slideNodes()</code></a> | ||
| </sup> | ||
| ##### `slideNodes` | ||
| ##### `scrollNext()` | ||
| <details> | ||
| <summary> | ||
| Grab the slide nodes inside the container. | ||
| </summary> | ||
| <hr> | ||
| <div> | ||
| This API method returns an array with the slide nodes inside the carousel container. Use this handy method if you want to manipulate the slide nodes in some way. You can also grab the length of the array to get the slide count. | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <sup> | ||
| <strong>Parameters: </strong> | ||
| <code>none</code> | ||
| </sup> | ||
| </div> | ||
| <div> | ||
| <sup> | ||
| <strong>Return Type: </strong> | ||
| <code>Node.ELEMENT_NODE[]</code> | ||
| </sup> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <a href="https://codesandbox.io/s/embla-carousel-slidenodes-dsesp"> | ||
| <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> | ||
| </a> | ||
| | ||
| <a href="https://codesandbox.io/s/embla-carousel-slidenodes-dsesp"> | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </div> | ||
| <br> | ||
| <p> | ||
| <strong>Usage</strong> | ||
| </p> | ||
| ```javascript | ||
| const embla = EmblaCarousel(emblaNode, options) | ||
| const emblaSlides = embla.slideNodes() | ||
| ``` | ||
| <p>Scrolls to next snap point if possible. If <code>loop: false</code> and the carousel is on the last snap point this method will do nothing.</p> | ||
| <sup> | ||
| ✨ <strong>Demo</strong> - | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollnext-scrollprev-hutpm"><code>embla.scrollNext()</code></a> | ||
| </sup> | ||
| <hr> | ||
| </details> | ||
| ##### `scrollPrev()` | ||
| ##### `scrollNext` | ||
| <p>Scrolls to previous snap point if possible. If <code>loop: false</code> and the carousel is on the first snap point this method will do nothing.</p> | ||
| <sup> | ||
| ✨ <strong>Demo</strong> - | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollnext-scrollprev-hutpm"><code>embla.scrollPrev()</code></a> | ||
| </sup> | ||
| <details> | ||
| <summary> | ||
| Scroll to the next snap point if possible. | ||
| </summary> | ||
| <hr> | ||
| <div> | ||
| This API method scrolls to the next snap point if possible. If the | ||
| <a href="#loop"> | ||
| <code>loop</code> | ||
| </a> option is disabled and the carousel is on the last snap point, this method will do nothing. When loop is enabled, it will always be able to scroll to the next snap point. Useful for creating a scroll next button for example. | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <sup> | ||
| <strong>Parameters: </strong> | ||
| <code>none</code> | ||
| </sup> | ||
| </div> | ||
| <div> | ||
| <sup> | ||
| <strong>Return Type: </strong> | ||
| <code>undefined</code> | ||
| </sup> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollnext-scrollprev-hutpm"> | ||
| <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> | ||
| </a> | ||
| | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollnext-scrollprev-hutpm"> | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </div> | ||
| <br> | ||
| <p> | ||
| <strong>Usage</strong> | ||
| </p> | ||
| ```javascript | ||
| const embla = EmblaCarousel(emblaNode, options) | ||
| const nextButton = emblaNode.querySelector('.embla__next') | ||
| nextButton.addEventListener('click', embla.scrollNext, false) | ||
| ``` | ||
| ##### `scrollTo(index)` | ||
| ```html | ||
| <button class="embla__next" type="button"> | ||
| Scroll Next | ||
| </button> | ||
| ``` | ||
| <p>Scrolls to the snap point that matches the passed index. If <code>loop: true</code> the carousel will seek the closest way to the target.</p> | ||
| <sup> | ||
| ✨ <strong>Demo</strong> - | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollto-3igby"><code>embla.scrollTo()</code></a> | ||
| </sup> | ||
| <hr> | ||
| </details> | ||
| ##### `scrollPrev` | ||
| <details> | ||
| <summary> | ||
| Scroll to the previous snap point if possible. | ||
| </summary> | ||
| <hr> | ||
| <div> | ||
| This API method scrolls to the previous snap point if possible. If the | ||
| <a href="#loop"> | ||
| <code>loop</code> | ||
| </a> option is disabled and the carousel is on the first snap point, this method will do nothing. When loop is enabled, it will always be able to scroll to the previous snap point. Useful for creating a scroll previous button for example. | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <sup> | ||
| <strong>Parameters: </strong> | ||
| <code>none</code> | ||
| </sup> | ||
| </div> | ||
| <div> | ||
| <sup> | ||
| <strong>Return Type: </strong> | ||
| <code>undefined</code> | ||
| </sup> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollnext-scrollprev-hutpm"> | ||
| <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> | ||
| </a> | ||
| | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollnext-scrollprev-hutpm"> | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </div> | ||
| <br> | ||
| <p> | ||
| <strong>Usage</strong> | ||
| </p> | ||
| ```javascript | ||
| const embla = EmblaCarousel(emblaNode, options) | ||
| const prevButton = emblaNode.querySelector('.embla__prev') | ||
| prevButton.addEventListener('click', embla.scrollPrev, false) | ||
| ``` | ||
| ```html | ||
| <button class="embla__prev" type="button"> | ||
| Scroll Previous | ||
| </button> | ||
| ``` | ||
| <hr> | ||
| </details> | ||
| ##### `scrollTo` | ||
| <details> | ||
| <summary> | ||
| Scroll to a snap point by its unique index. | ||
| </summary> | ||
| <hr> | ||
| <div> | ||
| This API method scrolls to the snap point that matches the given index. When the | ||
| <a href="#loop"> | ||
| <code>loop</code> | ||
| </a> option is enabled, the carousel will seek the closest way to the target. Useful for creating dot navigation together with the | ||
| <a href="#scrollsnaplist"> | ||
| <code>scrollSnapList</code> | ||
| </a> method. | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <sup> | ||
| <strong>Parameters: </strong> | ||
| <code>index: number</code> | ||
| </sup> | ||
| </div> | ||
| <div> | ||
| <sup> | ||
| <strong>Return Type: </strong> | ||
| <code>undefined</code> | ||
| </sup> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollto-3igby"> | ||
| <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="Embla Carousel CodeSandbox" /> | ||
| </a> | ||
| | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollto-3igby"> | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </div> | ||
| <br> | ||
| <p> | ||
| <strong>Usage</strong> | ||
| </p> | ||
| ```javascript | ||
| const embla = EmblaCarousel(emblaNode, options) | ||
| const dots = emblaNode.querySelector('.embla__dots') | ||
| const dotButtons = [].slice.call(dots.querySelectorAll('.embla__dot')) | ||
| dotButtons.forEach((dotButton, index) => { | ||
| const scrollToIndex = () => embla.scrollTo(index) | ||
| dotButton.addEventListener('click', scrollToIndex, false) | ||
| }) | ||
| ``` | ||
| ```html | ||
| <div class="embla__dots"> | ||
| <button class="embla__dot" type="button"> | ||
| Scroll To 1 | ||
| </button> | ||
| <button class="embla__dot" type="button"> | ||
| Scroll To 2 | ||
| </button> | ||
| <button class="embla__dot" type="button"> | ||
| Scroll To 3 | ||
| </button> | ||
| <button class="embla__dot" type="button"> | ||
| Scroll To 4 | ||
| </button> | ||
| </div> | ||
| ``` | ||
| <hr> | ||
| </details> | ||
| ##### `canScrollPrev()` | ||
@@ -884,0 +1125,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by5.93%
103733
- Number of lines in readme file
- increased by22.67%
1304
No dependency changes