@yourwishes/carousel
Version:
A modern, flexible and performant carousel for the time concious developer.
154 lines (139 loc) • 5.1 kB
HTML
<html lang="en">
<head>
<title>YW Carousel - Examples</title>
<meta charset="utf-8" />
<link href="./styles.css" type="text/css" rel="stylesheet" />
<script src="../dist/ywcarousel.browser.js" type="text/javascript"></script>
<!-- Observe these example styles, you can really do about anything -->
<style type="text/css">
.o-carousel {
display: flex;
width: 100%;
overflow: hidden;
cursor: grab;
margin-bottom: 10rem;
}
.o-carousel__slide {
flex-shrink: 0;
width: 100%;
transform: translate3d(var(--x), 0, 0);
}
.is-vertical { flex-direction: column; }
.is-vertical .o-carousel__slide { transform: translate3d(0, var(--y), 0); }
.is-grabbing { cursor: grabbing; }
.is-grabbing .o-carousel__slide { transition: none; }
.is-auto-height { height: var(--slide-height); }
.is-peaking .o-carousel__slide {
width: calc(100% - 5rem);
opacity: 0.3;
transition: opacity 1s ease-out;
}
.is-peaking .is-target { opacity: 1; }
</style>
</head>
<body>
<main class="c-main">
<h1>YW Carousel</h1>
<!-- Basic Example -->
<h2>Traditional Carousel Style</h2>
<div class="o-carousel" data-example-traditional>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/F6C/FFF?Text=Slide 1" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/DF5/000?Text=Slide 2" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/FF3/000?Text=Slide 3" />
</div>
</div>
<script type="text/javascript">
ywCarousel.sliderCreate({
container: document.querySelector('[data-example-traditional]')
});
</script>
<!-- Snapless -->
<h2>Without Snapping</h2>
<div class="o-carousel" data-example-snapless>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/F6C/FFF?Text=Slide 1" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/DF5/000?Text=Slide 2" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/FF3/000?Text=Slide 3" />
</div>
</div>
<script type="text/javascript">
ywCarousel.sliderCreate({
container: document.querySelector('[data-example-snapless]'),
options: {
snap: false
}
});
</script>
<!-- Vertical Example -->
<h2>Vertical Style</h2>
<div class="o-carousel is-vertical is-auto-height" data-example-vertical>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/F6C/FFF?Text=Slide 1" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/DF5/000?Text=Slide 2" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/FF3/000?Text=Slide 3" />
</div>
</div>
<script type="text/javascript">
ywCarousel.sliderCreate({
container: document.querySelector('[data-example-vertical]'),
options: {
vertical: true
}
});
</script>
<!-- Padded Example -->
<h2>Slide Peaking</h2>
<div class="o-carousel is-peaking" data-example-peak-padded>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/F6C/FFF?Text=Slide 1" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/DF5/000?Text=Slide 2" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/FF3/000?Text=Slide 3" />
</div>
</div>
<script type="text/javascript">
ywCarousel.sliderCreate({
container: document.querySelector('[data-example-peak-padded]')
});
</script>
<!-- Infinite Example -->
<h2>Slide Peaking</h2>
<div class="o-carousel is-peaking" data-example-infinite>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/F6C/FFF?Text=Slide 1" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/DF5/000?Text=Slide 2" />
</div>
<div class="o-carousel__slide">
<img src="https://placehold.it/1920x1080/FF3/000?Text=Slide 3" />
</div>
</div>
<script type="text/javascript">
ywCarousel.sliderCreate({
container: document.querySelector('[data-example-infinite]'),
options: {
infinite: true
}
});
</script>
</main>
</body>
</html>