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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Scrollable SwiperJS Horizontal Slider</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
.swiper-container {
width: 100%;
height: 100vh;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.scrollable-content {
height: 100%;
overflow-y: scroll;
padding: 20px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="scrollable-content">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- Add more content here -->
</div>
</div>
<div class="swiper-slide">
<div class="scrollable-content">
<h2>Slide 2</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- Add more content here -->
</div>
</div>
<!-- Add more slides here -->
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body>
</html>
Explanation
- We begin by including SwiperJS library and its CSS stylesheet.
- Inside the
<body>tag, we create a.swiper-containerdiv to contain our slider. - Each slide within the swiper is represented by
.swiper-slideclass. - Inside each slide, we have a
.scrollable-contentdiv, 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.
Leave a Reply