Multiple Thumbnail Sliders?

[stephenmeehanuk]

Hi

I can see in the docs it's possible to add multiple sliders, but I can't see any mention of how to use multiple thumbnail sliders?

I've successfully followed the Thumbnail Slider guide, when I use the for loop example the two sliders are no longer connected. Splide outputs two individual sliders.

Is it possible to adapt the for loop to work with the Thumbnail Slider ?

[jamalsoueidan]

What is not working, I used same example and it works.

[stephenmeehanuk]

I've created a few demos on CodePen

I was wondering if it's possible to modify the for loop used in the SplideJS - Multiple Sliders no Thumbnails demo, so it would work when using the thumbnails configuration SplideJS - Multiple Sliders with Thumbnails

The SplideJS - Multiple Sliders with Thumbnails demo only works because I've hardcoded the JS.

I'd like to be able to use multiple thumbnail sliders on a single page, like this example in the docs https://splidejs.com/guides/themes/

The content would be added via a Content Management System (CMS). Being able to use a for loop would be ideal.

[NaotoshiFujita]

There are several solutions. The easiest one is wrapping paired sliders by another div:

<div class="wrapper">
  <div class="splide splide-main">...</div>
  <div class="splide splide-thumbs">...</div>
</div>

<div class="wrapper">
  <div class="splide splide-main">...</div>
  <div class="splide splide-thumbs">...</div>
</div>

...

And query wrappers after DOM contents are loaded:

var wrappers = document.querySelectorAll( '.wrapper' );

for ( var i = 0; i < wrappers.length; i++ ) {
  var wrapper   = wrappers[ i ];
  var mainElm   = wrapper.querySelector( '.splide-main' );
  var thumbsElm = wrapper.querySelector( '.splide-thumbs' );

  if ( mainElm && thumbsElm ) {
    var main   = new Splide( mainElm );
    var thumbs = new Splide( thumbsElm );
    main.sync( thumbs ).mount();
    thumbs.mount();
  }
}

[stephenmeehanuk]

Thanks for the reply, unfortunately it doesn't appear to work...

• Pagination is shown on both main and thumb
• Thumb only shows one slide
• Splide doesn't loop

I've updated the Codepen to show a working demo
https://codepen.io/stephenmeehan/pen/YzYzvyB?editors=1010

It'd be great if could have the same configuration as this demo https://codepen.io/stephenmeehan/pen/bGaGKdd

[stephenmeehanuk]

Hi

Is there anything wrong with the implementation here?
https://codepen.io/stephenmeehan/pen/YzYzvyB?editors=1010

I'd like to use more than one Splide on the page, but I can't seem to get it to work?

[NaotoshiFujita]

You have to pass options.

[stephenmeehanuk]

Managed to get this working
https://codepen.io/stephenmeehan/pen/OJBJjwO

For anyone else, the key is to pass options in var main and var thumbs. I was incorrectly using var mainElm and var thumbsElm.