Skip to content

Instantly share code, notes, and snippets.

@Velunce

Velunce/horizontal-slide-without-js.html

Last active June 12, 2025 13:20
Show Gist options
  • Save Velunce/5e464f167a6a7e6f58475380e178e978 to your computer and use it in GitHub Desktop.
Save Velunce/5e464f167a6a7e6f58475380e178e978 to your computer and use it in GitHub Desktop.
Download ZIP
How to implement a swiper in HTML without JS.
Raw
horizontal-slide-without-js.html
<!DOCTYPE html>
<html>
<head>
<title>Horizontal slide</title>
<style type="text/css">
.slide-box{
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
.slide-item{
width: 20%;
height: 200px;
border:1px solid #ccc;
border-right: 0;
font-size: 3em;
}
</style>
</head>
<body>
<div class="slide-box">
<div class="slide-item">1</div>
<div class="slide-item">2</div>
<div class="slide-item">3</div>
<div class="slide-item">4</div>
<div class="slide-item">5</div>
<div class="slide-item">6</div>
<div class="slide-item">7</div>
<div class="slide-item">8</div>
<div class="slide-item">9</div>
<div class="slide-item">10</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment