embla-carousel
Advanced tools
embla-carousel - npm Package Compare versions
Comparing version 2.7.1 to 2.7.2
| { | ||
| "name": "embla-carousel", | ||
| "version": "2.7.1", | ||
| "version": "2.7.2", | ||
| "author": "David Cetinkaya", | ||
@@ -5,0 +5,0 @@ "private": false, |
286
README.md
@@ -179,3 +179,3 @@ <br /> | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -186,3 +186,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -193,3 +193,3 @@ const options = { align: 'start' } | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -234,3 +234,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -241,3 +241,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -256,3 +256,3 @@ const options = { containerSelector: '.my-container-selector' } | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -297,3 +297,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -304,3 +304,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -317,3 +317,3 @@ const options = { slidesToScroll: 2 } | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -359,3 +359,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -366,3 +366,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -373,3 +373,3 @@ const options = { containScroll: true } | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -415,3 +415,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -422,3 +422,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -429,3 +429,3 @@ const options = { draggable: false } | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -471,3 +471,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -478,3 +478,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -485,3 +485,3 @@ const options = { dragFree: true } | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -529,3 +529,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -536,3 +536,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -598,3 +598,3 @@ const options = { loop: true } | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -605,3 +605,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -655,3 +655,3 @@ const options = { speed: 15 } | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -662,3 +662,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -715,3 +715,3 @@ const options = { startIndex: 3 } | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -722,3 +722,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -772,3 +772,3 @@ const options = { selectedClass: 'my-selected-class' } | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -779,3 +779,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -835,3 +835,3 @@ const options = { draggableClass: 'my-draggable-class' } | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -842,3 +842,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -902,3 +902,3 @@ const options = { draggingClass: 'my-dragging-class' } | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -909,3 +909,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -916,3 +916,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -951,3 +951,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -958,3 +958,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -965,3 +965,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1003,3 +1003,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1010,3 +1010,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1025,3 +1025,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1063,3 +1063,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1070,3 +1070,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1085,3 +1085,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1126,3 +1126,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1133,3 +1133,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1148,5 +1148,54 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
| ##### `scrollBy` | ||
| <details> | ||
| <summary> | ||
| Scroll the carousel by the given amount. | ||
| </summary> | ||
| <hr> | ||
| <div> | ||
| This API method allows users to manipulate the current | ||
| <a href="#scrollprogress"> | ||
| <code>scrollProgress</code> | ||
| </a> by either adding to it or subtracting from it. For example, assuming that the carousel is positioned on the first snap point, <code>0.5</code> will scroll the carousel half of its scrollable length. Scroll to target is smooth. | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <sup> | ||
| <strong>Parameters: </strong> | ||
| <code>progress: number</code> | ||
| </sup> | ||
| </div> | ||
| <div> | ||
| <sup> | ||
| <strong>Return Type: </strong> | ||
| <code>undefined</code> | ||
| </sup> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <a href="#scrollby"> | ||
| <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" /> | ||
| </a> | ||
| | ||
| <a href="#scrollby"> | ||
| <code>CodeSandbox (⚠️ Upcoming!)</code> | ||
| </a> | ||
| </div> | ||
| <br> | ||
| <p> | ||
| <strong>Usage</strong> | ||
| </p> | ||
| ```javascript | ||
| const embla = EmblaCarousel(emblaNode, options) | ||
| embla.scrollBy(0.5) | ||
| ``` | ||
| <hr> | ||
| </details> | ||
| ##### `canScrollPrev` | ||
@@ -1186,3 +1235,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1193,3 +1242,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1207,4 +1256,4 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| embla.on('init', togglePrevButtonEnabled); | ||
| embla.on('select', togglePrevButtonEnabled); | ||
| embla.on('init', togglePrevButtonEnabled) | ||
| embla.on('select', togglePrevButtonEnabled) | ||
| ``` | ||
@@ -1218,3 +1267,3 @@ | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1256,3 +1305,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1263,3 +1312,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1277,4 +1326,4 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| embla.on('init', toggleNextButtonEnabled); | ||
| embla.on('select', toggleNextButtonEnabled); | ||
| embla.on('init', toggleNextButtonEnabled) | ||
| embla.on('select', toggleNextButtonEnabled) | ||
| ``` | ||
@@ -1288,3 +1337,3 @@ | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1326,3 +1375,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1333,3 +1382,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1344,3 +1393,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1382,3 +1431,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1389,3 +1438,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1400,3 +1449,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1438,3 +1487,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1445,3 +1494,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1451,7 +1500,7 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| const slidesInFirstScrollSnap = scrollSnaps[0].slideNodes; | ||
| const indexesInFirstScrollSnap = scrollSnaps[0].slideIndexes; | ||
| const slidesInFirstScrollSnap = scrollSnaps[0].slideNodes | ||
| const indexesInFirstScrollSnap = scrollSnaps[0].slideIndexes | ||
| ``` | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1493,3 +1542,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1500,3 +1549,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1506,8 +1555,8 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| embla.on('scroll', () => { | ||
| const scrollProgressPercentage = embla.scrollProgress() * 100 | ||
| console.log(`The carousel has scrolled ${scrollProgressPercentage}%.`) | ||
| const scrollPercentage = embla.scrollProgress() * 100 | ||
| console.log(`The carousel has scrolled ${scrollPercentage}%.`) | ||
| }) | ||
| ``` | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1546,3 +1595,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1553,3 +1602,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1559,3 +1608,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| const alertClickedSlide = (index) => { | ||
| const alertClickedSlide = index => { | ||
| return () => { | ||
@@ -1574,3 +1623,3 @@ if (embla.clickAllowed()) { | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1614,3 +1663,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1621,3 +1670,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1628,3 +1677,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1663,3 +1712,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1670,3 +1719,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1677,3 +1726,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1722,3 +1771,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1729,3 +1778,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1741,3 +1790,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1747,3 +1796,2 @@ | ||
| <details> | ||
@@ -1788,3 +1836,3 @@ <summary> | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1795,15 +1843,16 @@ <br> | ||
| </p> | ||
| ```javascript | ||
| const embla = EmblaCarousel(emblaNode, options) | ||
| const logIndexToConsole = () => { | ||
| console.log(`Selected index has changed to ${embla.selectedScrollSnap()}.`) | ||
| const logIndex = () => { | ||
| const selectedIndex = embla.selectedScrollSnap() | ||
| console.log(`Selected index has changed to ${selectedIndex}.`) | ||
| } | ||
| const addLogIndexListener = () => embla.on('select', logIndexToConsole); | ||
| const removeLogIndexListener = () => embla.off('select', logIndexToConsole); | ||
| const addLogIndexListener = () => embla.on('select', logIndex) | ||
| const removeLogIndexListener = () => embla.off('select', logIndex) | ||
| ``` | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1842,3 +1891,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1849,3 +1898,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1855,3 +1904,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1877,3 +1926,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1884,3 +1933,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1890,3 +1939,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1912,3 +1961,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1919,3 +1968,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1925,3 +1974,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1941,9 +1990,9 @@ | ||
| <div> | ||
| <a href="#"> | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollprogress-cghc5"> | ||
| <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" /> | ||
| </a> | ||
| | ||
| <a href="#"> | ||
| <a href="https://codesandbox.io/s/embla-carousel-scrollprogress-cghc5"> | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1954,8 +2003,13 @@ <br> | ||
| </p> | ||
| ```javascript | ||
| const embla = EmblaCarousel(emblaNode, options) | ||
| embla.on('scroll', () => { | ||
| const scrollPercentage = embla.scrollProgress() * 100 | ||
| console.log(`The carousel has scrolled ${scrollPercentage}%.`) | ||
| }) | ||
| ``` | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -1981,3 +2035,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -1988,3 +2042,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -1994,3 +2048,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -2016,3 +2070,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -2023,3 +2077,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -2029,3 +2083,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -2051,3 +2105,3 @@ | ||
| <code>CodeSandbox</code> | ||
| </a> | ||
| </a> | ||
| </div> | ||
@@ -2058,3 +2112,3 @@ <br> | ||
| </p> | ||
| ```javascript | ||
@@ -2064,3 +2118,3 @@ const embla = EmblaCarousel(emblaNode, options) | ||
| <hr> | ||
| <hr> | ||
| </details> | ||
@@ -2124,3 +2178,3 @@ | ||
| </p> | ||
| <p align="center"> | ||
| <p align="center"> | ||
| <a href="https://github.com/michaelrambeau"><img src="https://avatars0.githubusercontent.com/u/5546996?s=122&v=4" title="michaelrambeau" width="66" height="66" style="max-width:100%;"></a> | ||
@@ -2127,0 +2181,0 @@ <a href="https://github.com/ehellman"><img src="https://avatars3.githubusercontent.com/u/586152?s=122&v=4" title="ehellman" width="66" height="66" style="max-width:100%;"></a> |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.98%
121276
- Number of lines in readme file
- increased by2.63%
2109