Skip to content

Instantly share code, notes, and snippets.

@tannerhodges

tannerhodges/snap-slider-example.html

Created August 10, 2020 11:32
Show Gist options
  • Save tannerhodges/357984598ae8282d19eda4c835d1ac00 to your computer and use it in GitHub Desktop.
Save tannerhodges/357984598ae8282d19eda4c835d1ac00 to your computer and use it in GitHub Desktop.
Download ZIP
Examples of how to upgrade Snap Slider from older to newer versions
Raw
snap-slider-example.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Snap Slider v2.0.0</title>
<link rel="stylesheet" href="./snap-slider-v1.css">
<script defer src="./snap-slider-v2.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Snap Slider v2.0.0</h1>
<p>Here are some ways you can use CSS Scroll Snap and native Smooth Scroll behavior to progressively enhance scrollable elements into centered, snapping sliders.</p>
<p>The compiled CSS and JS for this CodePen is 3KB gzipped.</p>
<h2>Demo 1: Full-Width Slider</h2>
<p>On desktop, this demo has a simple 2-column layout. On mobile, it becomes a full-width slider with pagination links below.</p>
</div>
<div class="slider-container">
<div class="slider demo-basic" data-snap-slider="demo-1">
<section class="slider__item card">
<figure class="card__image" style="background: gray;"></figure>
<h3>Item #1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore impedit earum nobis, molestiae, ex consequatur nulla et dignissimos nostrum maiores vitae ratione tempora suscipit assumenda iusto laudantium ea, id ut?</p>
<button type="button">Call to Action</button>
</section>
<section class="slider__item card">
<figure class="card__image" style="background: lightgray;"></figure>
<h3>Item #2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore impedit earum nobis, molestiae, ex consequatur nulla et dignissimos nostrum maiores vitae ratione tempora suscipit assumenda iusto laudantium ea, id ut?</p>
<button type="button">Call to Action</button>
</section>
</div><!-- /.slider -->
<div class="slider-pagination demo-pagination demo-1-pagination"
data-snap-slider-nav="demo-1">
<button class="is-current" type="button">1</button>
<button type="button">2</button>
</div><!-- /.slider-pagination -->
</div><!-- /.slider-container -->
<div class="wrapper">
<h2>Demo 2: Card Slider</h2>
<p>On desktop, this demo has a 3-column grid with gutters. On mobile, each card peeks in from the sides. The middle card is centered by default.</p>
</div>
<div class="slider-container">
<div class="slider demo-cards" data-snap-slider="demo-2"
data-snap-slider-start="middle">
<section class="slider__item card">
<figure class="card__image" style="background: gray;"></figure>
<h3>Item #1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore impedit earum nobis, molestiae, ex consequatur nulla et dignissimos nostrum maiores vitae ratione tempora suscipit assumenda iusto laudantium ea, id ut?</p>
<button type="button">Call to Action</button>
</section>
<section class="slider__item card">
<figure class="card__image" style="background: lightgray;"></figure>
<h3>Item #2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore impedit earum nobis, molestiae, ex consequatur nulla et dignissimos nostrum maiores vitae ratione tempora suscipit assumenda iusto laudantium ea, id ut?</p>
<button type="button">Call to Action</button>
</section>
<section class="slider__item card">
<figure class="card__image" style="background: gray;"></figure>
<h3>Item #3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore impedit earum nobis, molestiae, ex consequatur nulla et dignissimos nostrum maiores vitae ratione tempora suscipit assumenda iusto laudantium ea, id ut?</p>
<button type="button">Call to Action</button>
</section>
</div><!-- /.slider -->
<div class="slider-pagination demo-pagination demo-2-pagination"
data-snap-slider-nav="demo-2">
<button class="is-current" type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
</div><!-- /.slider-pagination -->
</div><!-- /.slider-container -->
<div class="wrapper">
<h2>Demo 3: Card Slider + Arrows + Start on Card 1</h2>
<p>Same as Demo 2, except that this uses previous/next arrows instead of pagination, and it centers on the first card instead of the middle one.</p>
</div>
<div class="slider-container">
<div class="slider demo-cards" data-snap-slider="demo-3">
<section class="slider__item card">
<figure class="card__image" style="background: gray;"></figure>
<h3>Item #1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore impedit earum nobis, molestiae, ex consequatur nulla et dignissimos nostrum maiores vitae ratione tempora suscipit assumenda iusto laudantium ea, id ut?</p>
<button type="button">Call to Action</button>
</section>
<section class="slider__item card">
<figure class="card__image" style="background: lightgray;"></figure>
<h3>Item #2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore impedit earum nobis, molestiae, ex consequatur nulla et dignissimos nostrum maiores vitae ratione tempora suscipit assumenda iusto laudantium ea, id ut?</p>
<button type="button">Call to Action</button>
</section>
<section class="slider__item card">
<figure class="card__image" style="background: gray;"></figure>
<h3>Item #3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore impedit earum nobis, molestiae, ex consequatur nulla et dignissimos nostrum maiores vitae ratione tempora suscipit assumenda iusto laudantium ea, id ut?</p>
<button type="button">Call to Action</button>
</section>
</div><!-- /.slider -->
<div class="slider-arrows demo-arrows demo-3-arrows"
data-snap-slider-nav="demo-3">
<button class="demo-arrows__prev" type="button">Previous</button>
<button class="demo-arrows__next" type="button">Next</button>
</div><!-- /.slider-pagination -->
</div><!-- /.slider-container -->
<div class="wrapper">
<h2>References</h2>
<ul>
<li><a href="https://caniuse.com/#search=snap%20points" target="_blank" rel="noopener">Can I use… CSS Scroll snap points</a></li>
<li><a href="https://caniuse.com/#feat=css-scroll-behavior" target="_blank" rel="noopener">Can I use… CSSOM Scroll-behavior</a></li>
<li><a href="https://github.com/iamdustan/smoothscroll" target="_blank" rel="noopener">GitHub: Smooth Scroll behavior polyfill</a></li>
<li><a href="https://webkit.org/demos/scroll-snap/" target="_blank" rel="noopener">WebKit: Scroll Snapping Examples</a></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment