---
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>