The VueJS Slick Carousel Story and SwiperJS Slider

A few days ago, I got a template that used a jQuery Slick slider plugin. It is a feature-rich plugin, and it turned out there are not many alternatives for VueJS. You can find the jQuery link here.

There is a good-looking carousel plugin, but that is not compatible with Vue 3, just Vue 2.
So, I had to start a depth search, and I ran into this slider for Vue3 in the end. It knew everything I needed, except the vertical scroll, which was necessary for my task.
(Anyway, at the writing of this post, the vertical scroll feature of the vue3- carousel is in progress, and I am sure the result will be good because I have tested the plugin, and it seemed promising. )

Unfortunately, waiting was not an option for me. I had to start implementing something. After further searching, I bumped into the swiperJS. This mobile touch slider has several great features, and it is compatible with VueJS3 and many other Front-End frameworks. It has good documentation, and I had to use it several times to be able to reproduce the jQuery slick slider functionality. You can find the public GitHub repository link below.

Did you have any impediments?

Of course! (He-he) Impediments and difficulties are parts of this job and we have to solve them! But to be serious, one of the issues I had was that there was no option to position the scroll arrows vertically. Swiperjs has a lot of vertical functionality, but somehow they forgot to add this feature. So if someone needs a vertical arrow feature, then it is only achievable from CSS. So, if you check the ‘App.vue’ file in the public GitHub repo in the link above, then you can see that the solution was a few lines of CSS for the vertical arrows:

.swiper-vertical .swiper-button-next, .swiper-vertical .swiper-button-prev {
	 left: 50%;
	 transform: rotate(90deg);
	 transform-origin: left center;
}
.swiper-vertical .swiper-button-prev {
	 top: 10px;
}
.swiper-vertical .swiper-button-next {
         top: auto;
         bottom: 10px;
}

The other impediment was the fact that this plugin works by scroll by default. So I had to go through the documentation and had to find a way how I can disable the scroll and make it work by mouse click. That needed two properties that I had to bind as a parameter to the swiper component:

    <swiper
        :direction="'vertical'"
        :navigation="true"
        :slidesPerView="4"
        :spaceBetween="30"
        :watchSlidesProgress="true"
        :slideToClickedSlide="true"
        :loop="true"
        :modules="modules"
        class="mySwiper"
    >

Although it is not an impediment it is worth mentioning that this slider rotates in both directions. The Slick Slider jQuery plugin in the template that I mentioned, in the beginning, rotated in one direction. Luckily the stakeholders of the projects did not mind this small difference.

Conclusion & Closing

As of the date of this post writing, Swiperjs is the most robust solution for VueJS sliders. There are not many alternatives at the moment. It has really good documentation and it is not a newborn tool. It has versions to React, Angular, and VueJS. Svelte and native JavaScript is also available. Solving my issues did not take too much time and I was satisfied with the result. My experience was good with it I highly recommend it. However, it is also worth checking the progress of the vue-slick-carousel time-to-time because that would be an official rewrite of the Slick Slider jQuery plugin for Vue3.

By the way, if you are interested in my previous VueJS post you can read it here.