Skip to content

Instantly share code, notes, and snippets.

@scrawlon

scrawlon/swiper-js-multi-slide-example.html

Last active January 7, 2019 02:33
Show Gist options
  • Save scrawlon/c4ad8f45b1a91a7b9b70a99ce28d0392 to your computer and use it in GitHub Desktop.
Save scrawlon/c4ad8f45b1a91a7b9b70a99ce28d0392 to your computer and use it in GitHub Desktop.
Download ZIP
Swiper JS multi-slide example
Raw
swiper-js-multi-slide-example.html
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css'>
<style>
.swiper-container {
height: 300px;
}
.swiper-slide {
background: lightgray;
text-align: center;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class='swiper-container'>
<!-- Additional required wrapper -->
<div class='swiper-wrapper'>
<!-- Slides -->
<div class='swiper-slide'>Slide 1</div>
<div class='swiper-slide'>Slide 2</div>
<div class='swiper-slide'>Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class='swiper-button-prev'></div>
<div class='swiper-button-next'></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js'></script>
<script>
window.onload = function() {
var swiper = new Swiper('.swiper-container', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination'
},
slidesPerView: 3,
spaceBetween: 10
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment