mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 13:48:28 +00:00
102 lines
1.6 KiB
Plaintext
102 lines
1.6 KiB
Plaintext
---
|
|
layout: layouts/page.njk
|
|
title: Carousel
|
|
description: A carousel with motion and swipe.
|
|
toc:
|
|
- label: Usage
|
|
id: usage
|
|
---
|
|
|
|
|
|
<style>
|
|
.slider {
|
|
width: 300px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slides {
|
|
display: flex;
|
|
|
|
overflow-x: auto;
|
|
scroll-snap-type: x mandatory;
|
|
|
|
|
|
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
/*
|
|
scroll-snap-points-x: repeat(300px);
|
|
scroll-snap-type: mandatory;
|
|
*/
|
|
}
|
|
.slides::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.slides {
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
.slides > div {
|
|
scroll-snap-align: start;
|
|
flex-shrink: 0;
|
|
width: 300px;
|
|
height: 300px;
|
|
margin-right: 50px;
|
|
border-radius: 10px;
|
|
background: #eee;
|
|
transform-origin: center center;
|
|
transform: scale(1);
|
|
transition: transform 0.5s;
|
|
position: relative;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 100px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="slider">
|
|
|
|
<a href="#slide-1">1</a>
|
|
<a href="#slide-2">2</a>
|
|
<a href="#slide-3">3</a>
|
|
<a href="#slide-4">4</a>
|
|
<a href="#slide-5">5</a>
|
|
<a href="#slide-6">6</a>
|
|
<a href="#slide-7">7</a>
|
|
<a href="#slide-8">8</a>
|
|
<a href="#slide-9">9</a>
|
|
|
|
<div class="slides">
|
|
<div id="slide-1">
|
|
1
|
|
</div>
|
|
<div id="slide-2">
|
|
2
|
|
</div>
|
|
<div id="slide-3">
|
|
3
|
|
</div>
|
|
<div id="slide-4">
|
|
4
|
|
</div>
|
|
<div id="slide-5">
|
|
5
|
|
</div>
|
|
<div id="slide-6">
|
|
6
|
|
</div>
|
|
<div id="slide-7">
|
|
7
|
|
</div>
|
|
<div id="slide-8">
|
|
8
|
|
</div>
|
|
<div id="slide-9">
|
|
9
|
|
</div>
|
|
</div>
|
|
</div> |