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="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

1. Create a container for your slider:

<div class="swiper-container">
  <!-- Slides -->
</div>

1. Add the slides inside the container:

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

1. Initialize the Swiper slider with the following code:

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