How to modify the sliders to add the missing features

September 23rd, 2024
Tips

For those familiar with Swiper.js, you can further customize your sliders by injecting custom code. Here are a few examples below that you can use as inspiration. To implement these features, add the Javascript in a Code Block right after the slider element.

Special Thanks to Alexander Buzmakov for the method.

FreeMode

A "FreeMode" slider allows users to drag it to any position on its track using the mouse.

const slider = document.querySelector('%%SELECTOR%%').previousElementSibling;
const swiper = slider.querySelector('.swiper').swiper;
swiper.params.freeMode.enabled = true;
swiper.params.grabCursor = true;
swiper.update();

Autoplay in reverse direction

const slider = document.querySelector('%%SELECTOR%%').previousElementSibling;
const swiper = slider.querySelector('.swiper').swiper;
swiper.params.autoplay.delay = 1000;
swiper.params.autoplay.reverseDirection = true;
swiper.params.autoplay.disableOnInteraction = false;
swiper.autoplay.start();

Vertical slider

const slider = document.querySelector('%%SELECTOR%%').previousElementSibling;
const swiper = slider.querySelector('.swiper').swiper;
swiper.changeDirection('vertical');
swiper.update();

To create a vertical slider we also need a fixed height (or aspect ratio).
Select the Gallery element and add this custom CSS:

%%SELECTOR%% .swiper {
aspect-ratio:4/3;
/* or height:400px; */
}

More examples with fixed paginations and arrows, that you can copy and paste directly on your websites :

Cool Vertical Sliders

Combine several features

const slider = document.querySelector('%%SELECTOR%%').previousElementSibling;
const swiper = slider.querySelector('.swiper').swiper;
swiper.changeDirection('vertical');
swiper.params.autoplay.delay = 1000;
swiper.params.autoplay.reverseDirection = true;
swiper.params.autoplay.disableOnInteraction = false;
swiper.autoplay.start();
swiper.update();

Slider with images of various sizes

This example requires a more advanced script, only available here:

https://assetsforwp.com/assets/sliders-with-images-of-various-sizes/