snap-slider
Version:
Lightweight, easily customizable slider
151 lines (128 loc) • 5.48 kB
HTML
<html class="no-js" lang="en-us">
<head>
<meta charset="utf-8">
<title>Snap Slider</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<link rel="stylesheet" href="./src/snap-slider.css">
<style>
:root {
--navbar-height: 70px;
}
.container {
margin-top: var(--navbar-height);
padding-top: 50px;
}
#previous, #next {
border: 0;
color: white;
cursor: default ;
height: 100%;
position: absolute;
top: 0;
transition: 0.2s;
z-index: 1;
}
#previous:hover, #next:hover {
color: white;
}
#previous:disabled, #next:disabled {
opacity: 0;
}
#previous {
box-shadow: none;
left: 0;
}
#next {
box-shadow: none;
right: 0;
}
.material-icons {
background-color: black;
cursor: pointer;
font-size: 48px;
opacity: 0.7;
transition: 0.2s;
}
.material-icons:hover {
opacity: 0.85;
}
#snap-slider {
overflow: hidden;
}
</style>
</head>
<body>
<div class="navbar navbar-dark bg-primary navbar-expand-lg fixed-top">
<a href="" class="navbar-brand">Snap Slider</a>
<ul class="navbar-nav ml-auto">
<li><a href="https://github.com/ryanwalters/snap-slider">View on Github</a></li>
</ul>
</div>
<div class="container">
<h1><a href="https://github.com/ryanwalters/snap-slider" target="_blank">Snap Slider</a></h1>
<p class="lead">Lightweight, easily customizable slider.</p>
<div style="position: relative;">
<button id="previous" class="btn d-none d-sm-inline">
<i class="material-icons rounded">keyboard_arrow_left</i>
</button>
<div id="snap-slider" class="rounded">
<img src="https://picsum.photos/id/1026/400/300" alt="" />
<img src="https://picsum.photos/id/1032/400/300" alt="" />
<img src="https://picsum.photos/id/1040/400/300" alt="" />
<img src="https://picsum.photos/id/1042/400/300" alt="" />
<img src="https://picsum.photos/id/1048/400/300" alt="" />
<img src="https://picsum.photos/id/1043/400/300" alt="" />
<img src="https://picsum.photos/id/1059/400/300" alt="" />
<img src="https://picsum.photos/id/1061/400/300" alt="" />
<img src="https://picsum.photos/id/1062/400/300" alt="" />
<img src="https://picsum.photos/id/1076/400/300" alt="" />
<img src="https://picsum.photos/id/1079/400/300" alt="" />
<img src="https://picsum.photos/id/1081/400/300" alt="" />
<img src="https://picsum.photos/id/134/400/300" alt="" />
</div>
<button id="next" class="btn d-none d-sm-inline">
<i class="material-icons rounded">keyboard_arrow_right</i>
</button>
</div>
<div class="row mt-4 mb-5">
<div class="col-12 col-sm-auto">
<button id="append" class="btn btn-primary btn-lg btn-block">Append set of images</button>
</div>
<div class="col-12 col-sm-auto mt-3 mt-sm-0">
<button id="prepend" class="btn btn-primary btn-lg btn-block">Prepend new image</button>
</div>
</div>
<div class="d-none">
<img class="test" src="//placehold.it/400x300/f00/fff?text=Appended" />
<img class="test" src="//placehold.it/400x300/f00/fff?text=Appended" />
<img class="test" src="//placehold.it/400x300/f00/fff?text=Appended" />
<img class="test" src="//placehold.it/400x300/f00/fff?text=Appended" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="module">
import { SnapSlider } from './src/snap-slider.js';
const { $slider, $track, $buttonNext, $buttonPrev } = new SnapSlider({
$slider: document.querySelector('#snap-slider'),
$buttonNext: document.querySelector('#next'),
$buttonPrev: document.querySelector('#previous'),
});
document.querySelector('#append').addEventListener('click', () => {
$track.append(...document.querySelectorAll('.test'));
});
document.querySelector('#prepend').addEventListener('click', () => {
const img = document.createElement('img');
img.src = '//placehold.it/400x300/f00/fff?text=Prepended';
$track.prepend(img);
})
console.dir($slider, $track, $buttonPrev, $buttonNext);
</script>
</body>
</html>