@evermade/overflow-slider
Version:
Accessible slider that is powered by overflow: auto.
489 lines (458 loc) • 25.3 kB
HTML
<html lang="en-US" dir="rtl">
<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?12312"></script>
<main id="main" class="site-main">
<article class="entry">
<div class="entry__content">
<h1>Overflow Slider Demos RTL</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. 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>
</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>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>
<!--
<div class="entry__item">
<h3>Infinite scroll</h3>
<p>This is a bad idea. Please don't use.</p>
<div class="example-container-1-infinite-wrap">
<div class="overflow-slider example-container example-container-1-infinite">
<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>
-->
</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>