Breakdance4fun Logo

How to synchronize two sliders

How about a script that links two sliders to build a proper thumbnail slider?

While the existing ThumbSlider custom element covers basic needs, it has some constraints—it only supports images and horizontal layouts.

This script unlocks new possibilities, allowing you to:

  • Connect different slider types (ex Gallery slider with Advanced Slider element)
  • Convert one slider to a vertical slider
  • Automatically switch the vertical slider to horizontal layout on mobile devices

Table Of Contents

Step-by-Step Guide

Create a dynamic thumbnail slider by connecting two gallery elements:

  1. Add two Gallery elements and set both to Slider mode
  2. Populate both with identical image sets (or at least same number of images in each)
  3. Configure the first slider with ID "mainslider" and set Slides Per View to 1
  4. Set up the second slider with ID "thumbslider" and Slides Per View between 3-5 for thumbnail display
  5. Insert this JavaScript code in a Code Block after your sliders:
function linkSwipers(mainSliderSelector, thumbsSliderSelector, vertical = false, mobileBreakpoint) {
const mainSwiperEl = document.querySelector(mainSliderSelector + ' .swiper');
const thumbsSwiperEl = document.querySelector(thumbsSliderSelector + ' .swiper');

if (!mainSwiperEl || !thumbsSwiperEl) return;

const mainSwiper = mainSwiperEl.swiper;
const thumbsSwiper = thumbsSwiperEl.swiper;

if (!mainSwiper || !thumbsSwiper) return;

function updateDirection() {
if (vertical) {
if (mobileBreakpoint && window.innerWidth < mobileBreakpoint) {
if (thumbsSwiper.params.direction !== 'horizontal') {
thumbsSwiper.changeDirection('horizontal');
thumbsSwiper.update();
}
} else {
if (thumbsSwiper.params.direction !== 'vertical') {
thumbsSwiper.changeDirection('vertical');
thumbsSwiper.update();
}
}
}
}

if (vertical) {
updateDirection();
if (mobileBreakpoint) {
window.addEventListener('resize', updateDirection);
} else {
// No breakpoint defined, just set vertical once
if (thumbsSwiper.params.direction !== 'vertical') {
thumbsSwiper.changeDirection('vertical');
thumbsSwiper.update();
}
}
}

mainSwiper.thumbs.swiper = thumbsSwiper;
mainSwiper.thumbs.init();
mainSwiper.thumbs.update();
}

linkSwipers('#mainslider', '#thumbslider');

To highlight the active thumbnail, adjust the image opacity to 0.2:

Gallery opacity image settings

Next, apply this custom CSS to your thumbnail gallery element:

%%SELECTOR%% .swiper-slide-thumb-active img {
opacity:1
}

That's all there is to it! You now have fully synchronized sliders with complete control. Customize any setting—adjust Slides Per View for different screen sizes, enable navigation arrows or pagination, set autoplay, or even integrate a lightbox for the main slider. The possibilities are endless.

Usage

The linkSwipers function has four arguments:

mainSliderSelector: CSS selector for the main Swiper slider's container.

thumbsSliderSelector: CSS selector for the thumbnail Swiper slider's container.

vertical (optional): If true, thumbnails stack vertically. Default is false.

mobileBreakpoint (optional): Pixel width at which vertical thumbnails switch to horizontal on mobile. 

examples:

// 1) No vertical thumbs (horizontal default)
linkSwipers('#mainslider1', '#thumbslider1');

// 2) Vertical thumbs without mobile breakpoint
// (always vertical)
linkSwipers('#mainslider2', '#thumbslider2', true);

// 3) Vertical thumbs with mobile breakpoint at 768px
// (switch to horizontal on mobile)
linkSwipers('#mainslider3', '#thumbslider3', true,768);

Tips

For the thumbnail slider, choose a lower resolution and disable the Scrset & sizes. Your slider doesn't need to load the full size images.

Thumbnail slider settings

Vertical Slider Setup Guide

Vertical sliders require specific styling to function properly. The most important step is setting a fixed height. Select your slider element and apply this custom CSS (adjust the height value as needed for your design):

%%SELECTOR%%, %%SELECTOR%% .swiper {
height:600px
}

To add arrows and pagination for vertical sliders, you'll need to adjust several CSS properties. Since these elements are typically designed for horizontal sliders, you'll need to reposition them first. Then, for mobile responsiveness, reset their positions and rotate the arrows accordingly.

Below you'll find the complete CSS code for both desktop and mobile modes.

%%SELECTOR%%, %%SELECTOR%% .swiper {
height:600px
}
%%SELECTOR%% .swiper-slide-thumb-active img {
opacity:1
}
%%SELECTOR%% .breakdance-swiper-wrapper {
display: flex;
justify-content: center;
}
%%SELECTOR%% .swiper-button-prev {
left:unset;
margin-top:unset;
top:20px;
}
%%SELECTOR%% .swiper-button-next {
right:unset;
top:unset;
bottom:20px;
}
%%SELECTOR%% .swiper-pagination {
display:flex;
height:100%;
width:auto;
flex-direction:column;
justify-content:center;
gap:4px;
padding:5px;
}
%%SELECTOR%% .swiper {
height:100px
}
%%SELECTOR%% .swiper-button-next {
right:10px;
left:auto;
top:50%;
transform:rotate(-90deg);
}
%%SELECTOR%% .swiper-button-prev {
left:10px;
top:50%;
transform:rotate(-90deg);
margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));
}

Premium Examples

Explore ready-to-use examples that you can easily copy and paste directly into your own WordPress websites. Visit AssetsForWP for access to high-quality resources like:

Synchronized Sliders