Slider javascript vertical

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

  1. Add the Swiper library to your webpage:
<link rel="stylesheet" href="" />
<script src=""></script>
  1. Create a container for your slider:
<div class="swiper-container">
  <!-- Slides -->
  1. Add the slides inside the container:
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Slide 1
    <div class="swiper-slide">
      Slide 2
    <div class="swiper-slide">
      Slide 3
  1. Initialize the Swiper slider with the following code:
  var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: 30,
    mousewheel: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,

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.

Subscribe to The Poor Coder | Algorithm Solutions

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]