CSS Slider Syncing Problems *SplideJS*

Design help Custom code
1

Trying to figure out how to sync these two splide.js sliders. Here is the guide https://splidejs.com/thumbnail-slider/ but my understanding of JS is limited and I just cant figure out how to write the code correctly to make it work in Webflow. Would anyone be able to help me?

I tried this, but the second slider just respond. I assume it didn’t mount

// do not call mount() here.
primarySlider.sync( secondarySlider ).mount();

Here is my site Read-Only:
https://preview.webflow.com/preview/minds-stellar-project?utm_medium=preview_link&utm_source=designer&utm_content=minds-stellar-project&preview=2bcba09e4f0b78ede0281ceb7a225cad&workflow=preview

1 Like
2

Below is the code I have used in the past for synced Splide sliders:

<!-- Call Splide JS --> 
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

<script>

// Create and mount the thumbnails slider.
var secondarySlider = new Splide( '#secondary-slider', {
	fixedWidth  : 100,
	fixedHeight : 64,
  rewind      : true,
	isNavigation: true,
	gap         : '2em',
	/*focus       : 'center', */
	pagination  : false,
  arrows      : false,
	breakpoints : {
		'600': {
			fixedWidth  : 66,
			fixedHeight : 40,
		}
	}
} ).mount();

// Create the main slider.
var primarySlider = new Splide( '#primary-slider', {
	width  :'100%',
	height :'35em',
  type       : 'fade',
	/*heightRatio: 0.5, */
	pagination : false,
	arrows     : false,
  drag       : false,
	/*cover      : true, */
} );

// Set the thumbnails slider as a sync target and then call mount.
primarySlider.sync( secondarySlider ).mount();

</script>

Hopefully this helps

1 Like
3

Legend… this should be in the docs!