Swiperjs Vertical Scroll in Horizontal Slider

Creating a Swiperjs Vertical Scroll

In web development, sliders are essential for showcasing content in a visually appealing and interactive manner. SwiperJS is a powerful library for creating touch-enabled sliders with smooth animations and various customization options. However, implementing a vertical scroll within a horizontal swiper might seem challenging at first. Fear not! With a clever approach and some CSS magic, we can achieve this seamlessly.

Introduction to SwiperJS

SwiperjS is a modern and mobile-friendly slider library that allows developers to create beautiful, responsive, and touch-enabled sliders with ease. It offers a wide range of features like navigation controls, pagination, autoplay, and more. It’s easier to use and mobile friendly.

The Challenge: Vertical Scroll within Horizontal Slider

By default, SwiperJS supports horizontal & vertical sliding. However, there are scenarios where we might need to incorporate vertical scroll within a horizontal slider, such as showcasing long lists or detailed content.

SwiperJs has built in support for nested slider, so its possible to create vertical slider inside the horizontal and horizontal slider inside vertical slider, but what if we don’t want to use nested slider because we don’t actually have the more slides, we just have some very long content and you just want your visitors to be able to see full content but swiperjs won’t allow you to vertical scroll within horizontal slider, so what to do in that case, well there is this handy solution that helps a lot.

Solution: Creating a Vertically Scrollable Swiperjs slider

To achieve vertically scrolling within a horizontal slider using SwiperJS, we’ll utilize a simple yet effective technique. We’ll nest a full-height container inside each swiper slide item to wrap our content and apply CSS to enable vertical scrolling. Let’s see an example.

Implementation Example

Let’s dive into the code to see how this can be achieved:

  
  
  
  
  


  

    

      

        

          
Slide 1
          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          
        
      
      

        

          
Slide 2
          
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          
        
      
      
    
    

  

  
  

Explanation

• We begin by including SwiperJS library and its CSS stylesheet.
• Inside the tag, we create a .swiper-container div to contain our slider.
• Each slide within the swiper is represented by .swiper-slide class.
• Inside each slide, we have a .scrollable-content div, which will hold our scrollable content.
• The CSS styles ensure that each slide takes up the full height of the viewport and enables vertical scrolling within the .scrollable-content.

Conclusion

In this article, we’ve demonstrated how to integrate vertical scrolling within a horizontal slider using SwiperJS. By nesting a scrollable container within each slide, we’ve created an intuitive and seamless user experience for navigating through both horizontal and vertical content. With this technique, you can enhance the usability and engagement of your web applications with SwiperJS.