(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Don’t want to make from scratch? Get the template instead 🙂
Introduction – Making a Vertical Slider Carousel with Elementor and SwiperJS
In this tutorial, we will simply expand from our base slider that we made before (check blog or video) to work in vertical layout.
Layout for containers or DIV:
The main layout is having a swiper container, inside it should be swiper-wrapper and inside swiper-wrapper should be slides. The swiper navigation container is optional, you can directly add Arrow icons and swiper-pagination in swiper container directly.
Support by
using these links
(Affiliate)
Start Earning by becoming an Elementor Affiliate
Swiperjs automatically adds position absolute to pagination. For this one I have overwritten the absolute position and turned it static. If you wish to use position absolute, please remove the like position:static from the code.
Vertical Slider Code
- .dm-base-v-swiper is the CSS class for the main container that has all the slides, navigation, and pagination.
- direction allows you to choose between horizontal and vertical direction for your slider.
- loop can be set to true/false to enable or disable looping.
- To add more features, refer to the “Custom Carousel” blog post or its video to learn how to customize further. Link – https://dmmotionarts.com/custom-base-slider-with-autoplay-elementor-swiperjs-slider-tutorial/
- wrapperClass is used to use custom CSS class for our swiper-wrapper. This is important as we don’t want elementor swiper styling to be applied here.
- slideClass is used to use custom CSS class for our slides. Important for the same reason as above.
- nextEl and prevEl is the CSS class that we use for navigation buttons. It can be added to any icon, image or text.
- In pagination, el: allows us to specify which container/div is our pagination container.
- We have different pagination types available. You can read or watch video on “Custom Carousel Blog Post” page.
- To change height, check from line 76 for each responsive type.
- By default, swiperjs makes the pagination container have position absolute. it was kinda messing with the design I had planned. So in below code I have overwritten position absolute to position:static at line 144. You can delete this part if you wish to use position: absolute.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" integrity="sha512-pmAAV1X4Nh5jA9m+jcvwJXFQvCBi3T17aZ1KWkqXr7g/O2YMvO8rfaa5ETWDuBvRq6fbDjlw4jHL44jNTScaKg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" integrity="sha512-Ysw1DcK1P+uYLqprEAzNQJP+J4hTx4t/3X2nbVwszao8wD+9afLjBQYjz7Uk4ADP+Er++mJoScI42ueGtQOzEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
window.addEventListener("load", (event) => {
const swiper = new Swiper('.dm-base-v-swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
grabCursor: true,
mousewheel:false,
centeredSlides:false,
initialSlide:0,
// Wrapper and slide class
wrapperClass: 'dm-base-v-swiper-wrapper',
slideClass: 'dm-base-v-swiper-slide',
navigation: {
nextEl: ".dm-base-v-swiper-next",
prevEl: ".dm-base-v-swiper-prev",
},
pagination: {
el: ".dm-base-v-swiper-pagination",
// type: "fraction",
// type: "progressbar",
bulletClass: "dm-base-v-bullet",
bulletActiveClass: "dm-base-v-bullet-active",
clickable: true,
},
breakpoints: {
1024: {
spaceBetween: 20,
slidesPerView:1,
slidesPerGroup:1,
},
767: {
spaceBetween: 20,
slidesPerView:1,
slidesPerGroup:1,
},
0: {
spaceBetween: 20,
slidesPerView:1,
slidesPerGroup:1,
},
},
});
});
</script>
<style>
/*Height of the slider*/
.dm-base-v-swiper,
.dm-base-v-swiper-slide
{
height: 450px !important;
}
/*For Tablet*/
@media(max-width:1024px){
.dm-base-v-swiper,
.dm-base-v-swiper-slide
{
height: 450px !important;
}
}
/*For Mobile*/
@media(max-width:767px){
.dm-base-v-swiper,
.dm-base-v-swiper-slide
{
height: 350px !important;
}
}
.dm-base-v-swiper-wrapper .e-con.e-flex{
flex-shrink: 0 !important;
}
/*Show cursor pointer on arrows*/
.dm-base-v-swiper-next,
.dm-base-v-swiper-prev {
cursor:pointer;
}
/*Pagination Container Size*/
/*Remove for progressbar type*/
.dm-base-v-swiper-pagination {
width:fit-content !important;
/*Reset default styling*/
position: static !important;
transform:translate3D(0px,0px,0px) !important;
}
/*For mobile*/
@media(max-width:767px) {
.dm-base-v-swiper-pagination {
width:fit-content !important;
}
}
/*For Bullet Pagination*/
.dm-base-v-bullet {
position:relative;
width:8px;
height: 8px;
aspect-ratio: 1;
background:black;
border-radius:100px;
cursor:pointer;
opacity: 0.2;
}
.dm-base-v-bullet.dm-base-v-bullet-active {
opacity: 1;
}
</style>
