How to modify the sliders to add the missing features

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/