Slider javascript vertical
Poor Man
- Published
- Reading time
- 1 min read
- Length
- 186 words
Slider Javascript Vertical#
If you are looking to create a vertical slider in your webpage, you can do it easily with Javascript. There are different Javascript libraries available that you can use to create a vertical slider, but here we will use the Swiper library to create a simple vertical slider.
Steps to create a vertical slider using Swiper#
- Add the Swiper library to your webpage:
HTML
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>- Create a container for your slider:
HTML
<div class="swiper-container">
<!-- Slides -->
</div>- Add the slides inside the container:
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
</div>
<div class="swiper-slide">
Slide 2
</div>
<div class="swiper-slide">
Slide 3
</div>
</div>
</div>- Initialize the Swiper slider with the following code:
HTML
<script>
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>The above code initializes the Swiper slider with vertical direction, one slide per view, 30 pixels space between slides, mousewheel enabled for scrolling, and pagination dots for navigation.