@evermade/overflow-slider

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="dist/overflow-slider.css" rel="stylesheet" /> <link href="assets/demo.css" rel="stylesheet" /> <title>Demo – overflow-slider</title> <meta property="og:description" content="overflow-slider" /> </head> <body> <div class="site"> <header class="site-header"> <div class="site-header__inner"> <div class="site-branding"> <a href="https://github.com/evermade/overflow-slider" class="site-logo" aria-label="Evermade"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 270 270" width="64" height="64"> <path fill="#F04D37" d="M0 0h270v270H0z"/> <path fill="#fff" d="M134.748 73.7339c-13.949-.1043-27.398 5.1741-37.535 14.7314-10.1368 9.5573-16.1761 22.6537-16.8549 36.5487H189.235c-.715-13.9-6.779-26.9892-16.929-36.5417-10.15-9.5525-23.603-14.8318-37.558-14.7384Zm85.532 74.6601H79.2372c2.228 13.263 9.1042 25.307 19.4039 33.986 10.2999 8.679 23.3539 13.43 36.8379 13.406 9.931.362 19.754-2.16 28.276-7.26 8.521-5.099 15.375-12.557 19.729-21.467h32.848c-13.354 35.921-41.474 54.926-82.072 54.926-11.548.213-23.019-1.905-33.726-6.227-10.7059-4.321-20.4256-10.757-28.5743-18.921-8.1488-8.163-14.5585-17.886-18.8439-28.583-4.2854-10.697-6.358-22.148-6.0933-33.664 0-49.9195 35.7237-87.59 87.7255-87.59 50.588 0 87.238 37.476 87.238 85.743.118 5.275-.489 10.541-1.804 15.651"/> </svg> <span>@evermade/overflow-slider</span> </a> </div> </div> </header> <script type="module" src="assets/demo.js"></script> <main id="main" class="site-main"> <article class="entry"> <div class="entry__content"> <h1>Overflow Slider Demos</h1> <section class="entry__section"> <h2>Basic Demos</h2> <div class="entry__item"> <h3>Pure CSS</h3> <p>No plugins applied. Using only CSS.</p> <div class="overflow-slider example-container example-container-1-css"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> <a href="#11" class="example-item example-item--11">11</a> <a href="#12" class="example-item example-item--12">12</a> <a href="#13" class="example-item example-item--13">13</a> </div> </div> <div class="entry__item"> <h3>Mouse Dragging</h3> <p>Drag slides with mouse. Uses DragScrollingPlugin. These slides are clickable.</p> <div class="overflow-slider example-container example-container-1-drag-scrolling-clickable"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> <a href="#11" class="example-item example-item--11">11</a> <a href="#12" class="example-item example-item--12">12</a> <a href="#13" class="example-item example-item--13">13</a> </div> <p style="margin-top:1.5rem;">These slides are not clickable.</p> <div class="overflow-slider example-container example-container-1-drag-scrolling-not-clickable"> <div class="example-item example-item--1">1</div> <div class="example-item example-item--2">2</div> <div class="example-item example-item--3">3</div> <div class="example-item example-item--4">4</div> <div class="example-item example-item--5">5</div> <div class="example-item example-item--6">6</div> <div class="example-item example-item--7">7</div> <div class="example-item example-item--8">8</div> <div class="example-item example-item--9">9</div> <div class="example-item example-item--10">10</div> <div class="example-item example-item--11">11</div> <div class="example-item example-item--12">12</div> <div class="example-item example-item--13">13</div> </div> <p style="margin-top:1.5rem;">Scroll-snap emulation enabled.</p> <div class="overflow-slider example-container example-container-1-drag-scrolling-scroll-snap"> <div class="example-item example-item--1">1</div> <div class="example-item example-item--2">2</div> <div class="example-item example-item--3">3</div> <div class="example-item example-item--4">4</div> <div class="example-item example-item--5">5</div> <div class="example-item example-item--6">6</div> <div class="example-item example-item--7">7</div> <div class="example-item example-item--8">8</div> <div class="example-item example-item--9">9</div> <div class="example-item example-item--10">10</div> <div class="example-item example-item--11">11</div> <div class="example-item example-item--12">12</div> <div class="example-item example-item--13">13</div> </div> </div> <div class="entry__item"> <h3>Arrows</h3> <p>Display buttons to move slides. Uses ArrowsPlugin.</p> <div class="overflow-slider example-container example-container-1-arrows"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> <a href="#11" class="example-item example-item--11">11</a> <a href="#12" class="example-item example-item--12">12</a> <a href="#13" class="example-item example-item--13">13</a> </div> <p style="margin-top:1.5rem;">Arrows can move also one slide at a time with "movementType" set to "slide".</p> <div class="overflow-slider example-container example-container-1-arrows-by-slide"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> <a href="#11" class="example-item example-item--11">11</a> <a href="#12" class="example-item example-item--12">12</a> <a href="#13" class="example-item example-item--13">13</a> </div> </div> <div class="entry__item"> <h3>Scroll Indicator</h3> <p>Display scroll indicator. Uses ScrollIndicatorPlugin.</p> <div class="overflow-slider example-container example-container-1-scroll-indicator"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> <div class="entry__item"> <h3>Dots</h3> <p>Display dots indicator (by slide). Uses DotsPlugin.</p> <div class="overflow-slider example-container example-container-1-dots"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> </div> <p style="margin-top:1.5rem;">Display dots indicator (by view).</p> <div class="overflow-slider example-container example-container-1-dots-view"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> <div class="entry__item"> <h3>Fade</h3> <p>Display fade. Uses FadePlugin. Fade can be on both sides but having it only at end is more usable.</p> <div class="example-container-1-fade-wrap"> <div class="example-container-1-fade__start"></div> <div class="overflow-slider example-container example-container-1-fade"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> <div class="example-container-1-fade__end"></div> </div> </div> <div class="entry__item"> <h3>Classnames</h3> <p>Toggle classes when slides are visible, partly visible or hidden. Uses ClassNamesPlugin.</p> <div class="overflow-slider example-container example-container-1-classname-opacity"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> <p style="margin-top:1.5rem;">Display separate effects when slides are partly visible. freezeStateOnVisible: true which means we don't hide once visible slides</p> <div class="example-container-1-classname-partly-wrapper"> <div class="overflow-slider example-container example-container-1-classname-partly"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> </div> <div class="entry__item"> <h3>Autoplay (slide)</h3> <p>Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.</p> <div class="example-container-1-autoplay-wrap-slide"> <div class="overflow-slider example-container example-container-1-autoplay-slide"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> </div> <div class="entry__item"> <h3>Autoplay (view)</h3> <p>Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.</p> <div class="example-container-1-autoplay-wrap-view"> <div class="overflow-slider example-container example-container-1-autoplay-view"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> </div> </section> <section class="entry__section"> <h2>Slide Contents</h2> <div class="entry__item"> <h3>Perfectly Fitting Slides</h3> <p>Slides fill the container perfectly.</p> <div class="overflow-slider example-container example-container-2-perfect-fit"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> <div class="entry__item"> <h3>Varying Width Slides</h3> <p>Slides are not equal width.</p> <div class="overflow-slider example-container example-container-2-varying-widths"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> </div> </div> <div class="entry__item"> <h3>Only Few Slides</h3> <p>Not enough slides to have a slider (on mobile has though).</p> <div class="overflow-slider example-container example-container-2-only-few-slides"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> </div> </div> </section> <section class="entry__section"> <h2>CSS Trickery</h2> <div class="entry__item"> <h3>Scroll Snapping (mandatory)</h3> <p>Force scrolling to snap to slide always.</p> <div class="overflow-slider example-container example-container-3-scroll-snapping-mandatory"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> <div class="entry__item"> <h3>Scroll Snapping (proximity)</h3> <p>Force scrolling to snap to slide not so strictly.</p> <div class="overflow-slider example-container example-container-3-scroll-snapping-proximity"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> <div class="entry__item"> <h3>Entrance and Exit Animations (experimental)</h3> <p>Animate slides when they appear and disappear. Seem to only work on Chrome.</p> <div class="overflow-slider example-container example-container-3-entrance-animation"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> </div> </div> </section> <section class="entry__section"> <h2>Real Life Usage</h2> <div class="entry__item"> <h3>Filters</h3> <p>Display filter buttons in one line that overflows when necessary.</p> <div class="example-4-filters-wrapper"> <div class="example-4-filters-previous"> </div> <div class="overflow-slider example-container-4-filters"> <a href="#1" class="example-filter">Development</a> <a href="#2" class="example-filter">Design</a> <a href="#3" class="example-filter">Marketing</a> <a href="#4" class="example-filter">Sales</a> <a href="#5" class="example-filter">Support</a> <a href="#6" class="example-filter">Management</a> <a href="#7" class="example-filter">HR</a> <a href="#8" class="example-filter">Finance</a> <a href="#9" class="example-filter">Legal</a> <a href="#10" class="example-filter">Customer Service</a> <a href="#11" class="example-filter">Operations</a> <a href="#12" class="example-filter">Other</a> </div> <div class="example-4-filters-next"></div> </div> </div> <div class="entry__item"> <h3>Grid On Desktop, Slider On Mobile</h3> <p>Display contents differently for different sized screens.</p> <div class="overflow-slider example-container-4-grid-or-slider"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> </div> </div> <div class="entry__item"> <h3>Full Width Slider</h3> <p>Allow slides to flow in full screen but center them accoring to your content. Uses FullWidthPlugin.</p> <div class="example-container-4-full-width-wrapper"> <div class="overflow-slider example-container-4-full-width"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> <a href="#11" class="example-item example-item--11">11</a> <a href="#12" class="example-item example-item--12">12</a> </div> </div> </div> <div class="entry__item"> <h3>Synced Slider</h3> <p>Sync slides from thumbnails.</p> <div class="example-container-4-thumbnails-wrapper"> <div class="overflow-slider example-container-4-synced-main"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> <a href="#5" class="example-item example-item--5">5</a> <a href="#6" class="example-item example-item--6">6</a> <a href="#7" class="example-item example-item--7">7</a> <a href="#8" class="example-item example-item--8">8</a> <a href="#9" class="example-item example-item--9">9</a> <a href="#10" class="example-item example-item--10">10</a> <a href="#11" class="example-item example-item--11">11</a> <a href="#12" class="example-item example-item--12">12</a> </div> <div class="overflow-slider example-container-4-synced-thumbnails"> <button class="example-item example-item--1">1</button> <button class="example-item example-item--2">2</button> <button class="example-item example-item--3">3</button> <button class="example-item example-item--4">4</button> <button class="example-item example-item--5">5</button> <button class="example-item example-item--6">6</button> <button class="example-item example-item--7">7</button> <button class="example-item example-item--8">8</button> <button class="example-item example-item--9">9</button> <button class="example-item example-item--10">10</button> <button class="example-item example-item--11">11</button> <button class="example-item example-item--12">12</button> </div> </div> </div> <div class="entry__item"> <h3>Autoplaying Hero</h3> <p>It's possible. Not saying you should.</p> <div class="example-container-4-hero__wrapper"> <div class="example-container-4-hero__autoplay"></div> <div class="example-container-4-hero__dots"></div> <div class="overflow-slider example-container-4-hero"> <a href="#1" class="example-item example-item--1">1</a> <a href="#2" class="example-item example-item--2">2</a> <a href="#3" class="example-item example-item--3">3</a> <a href="#4" class="example-item example-item--4">4</a> </div> </div> </div> </section> </div> </article> </main> <div class="site-footer"> <p> This is demo for the <a href="https://github.com/evermade/overflow-slider">@evermade/overflow-slider</a>. </p> </div> </div> </body> </html>