How to Reverse Slide with Swiper.js
Swiper.js is a library that makes it easy to implement modern slideshows and carousels. Normally, slides move from left to right, but there are times when you may want to slide in the opposite direction for a specific application or design. This article details two ways to reverse the slide direction in Swiper.js.
Method 1: Use the HTML attribute dir=”rtl
The easiest way is to add the dir="rtl" attribute to the Swiper container. This attribute is a standard feature of HTML and is used to change text and layout from right to left. It is mainly applicable to right-to-left languages such as Arabic and Hebrew.
Description: Setting dir="rtl" will cause Swiper to automatically change the slide direction from right to left. This is a simple and compatible method because it uses standard HTML functionality.
<div class="swiper-container" dir="rtl">
<div class="swiper-wrapper">
<div class="swiper-slide">slide1</div>
<div class="swiper-slide">slide2</div>
<div class="swiper-slide">slide3</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Method 2: Swiper’s option to slide in the opposite direction
In Swiper.js version 6.0 and later, it is possible to change the automatic slide direction in the JavaScript settings. This setting uses Swiper’s autoplay option.
const swiper = new Swiper('.swiper-container', {
autoplay: {
reverseDirection: true, // slide delay: 3000, // slide delay: { autoplay: {
delay: 3000, // set slide delay time
}, }
loop: true, // loop the slide
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', }
}, }
});
Description: Setting autoplay.reverseDirection: true will reverse the autoplay of the slide. This will cause the slide to advance from right to left instead of left to right. This method is useful if you want to change the direction of the slide in a particular scenario.
Method 3: Using CSS to Control Slide Direction
You can also use CSS flexboxes to reverse the order of the slides. This method is useful if you want to control the order of the visuals without relying on JS or HTML attributes.
.swiper-wrapper {
display: flex;
flex-direction: row-reverse;
}
Description: flex-direction: row-reverse; can be used to reverse the order of the slides. However, this method is only applicable in limited scenarios, as the slide animation may remain left-to-right.
Conclusion
There are three ways to reverse the direction of slides in Swiper.js: using the dir="rtl" attribute, setting autoplay.reverseDirection, and using CSS to control the direction. Each method has its advantages, and it is important to choose the best method for your project’s requirements.