How to synchronize active slides with the custom buttons (Change active state of a custom buttons when slide throughout the slider)?

Design help Custom code
1

Hi, I’m new here. I found a very helpful piece of code on this post: Is it possible to link to a specific slide in a slider? created by @bartekkustra and discussed by others, like @cyberdave @david …

So far I managed to successfully integrate it with the Swiper slider, although I have basic knowledge of JavaScript and jQuery.

The custom buttons work perfectly with the Swiper slider (In a direction from custom buttons to slider). The question would be how to manage to synchronize active slides with the custom buttons?

Or, to be more precise, I want to change the active state of the custom buttons when I slide throughout the slider.
here is the test page link(it’s better to view on the cellphone) : https://kireyna-650308.webflow.io/test-copy
and
here is my code for any case:

//First slider
const swiper1 = new Swiper(‘.swiper1’, {
// Optional parameters
direction: ‘horizontal’,
loop: true,
speed: 1200,
autoplay: {
delay: 5000,
},
// If we need pagination
pagination: {
el: ‘.swiper-pagination1’,
clickable: true,
},
});

const swiper2 = new Swiper(‘.swiper2’, {
// Optional parameters
direction: ‘horizontal’,
loop: true,
speed: 1200,
autoplay: {
delay: 5000,
},
// If we need pagination
pagination: {
el: ‘.swiper-pagination2’,
clickable: true,
},
});

	$(document).ready(function() {
		$('#kireynaslide1').click(function(e) {
			e.preventDefault()
			$('.slider-link').removeClass('active1');
			$(this).addClass('active1');
			$('.swiper-pagination1 span:nth-child(1)').trigger('click');
		});
		$('#kireynaslide2').click(function(e) {
			e.preventDefault();
			$('.slider-link').removeClass('active1');
			$(this).addClass('active1');
			$('.swiper-pagination1 span:nth-child(2)').trigger('click');
		});
		$('#kireynaslide3').click(function(e) {
			e.preventDefault();
			$('.slider-link').removeClass('active1');
			$(this).addClass('active1');
			$('.swiper-pagination1 span:nth-child(3)').trigger('click');
		});
		$('#kireynaslide4').click(function(e) {
			e.preventDefault();
			$('.slider-link').removeClass('active1');
			$(this).addClass('active1');
			$('.swiper-pagination1 span:nth-child(4)').trigger('click');
		});
  });

  $(document).ready(function() {
		$('#kireynaslide11').click(function(e) {
			e.preventDefault()
			$('.slider-link').removeClass('active2');
			$(this).addClass('active2');
			$('.swiper-pagination2 span:nth-child(1)').trigger('click');
		});
		$('#kireynaslide22').click(function(e) {
			e.preventDefault();
			$('.slider-link').removeClass('active2');
			$(this).addClass('active2');
			$('.swiper-pagination2 span:nth-child(2)').trigger('click');
		});
		$('#kireynaslide33').click(function(e) {
			e.preventDefault();
			$('.slider-link').removeClass('active2');
			$(this).addClass('active2');
			$('.swiper-pagination2 span:nth-child(3)').trigger('click');
		});
		$('#kireynaslide44').click(function(e) {
			e.preventDefault();
			$('.slider-link').removeClass('active2');
			$(this).addClass('active2');
			$('.swiper-pagination2 span:nth-child(4)').trigger('click');
		});
	});

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @vladikan,

Welcome to the forum! Hope I can help out with this one.

It looks like you’re using the class ‘active2’ for the second slider but this class isn’t set.

Would you be able to try replacing all the code within Page Settings > Custom Code > Before </body> tag:

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

<script>
	const swiper1 = new Swiper('.swiper1', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
  speed: 1200,
	autoplay: {
  delay: 5000,
  },
  // If we need pagination
  pagination: {
    el: '.swiper-pagination1',
    clickable: true,
  },
});

const swiper2 = new Swiper('.swiper2', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
  speed: 1200,
	autoplay: {
  delay: 5000,
  },
  // If we need pagination
  pagination: {
    el: '.swiper-pagination2',
    clickable: true,
  },
});



    	$(document).ready(function() {
    		$('#kireynaslide1').click(function(e) {
    			e.preventDefault()
    			$('.slider-link').removeClass('active1');
    			$(this).addClass('active1');
    			$('.swiper-pagination1 span:nth-child(1)').trigger('click');
    		});
    		$('#kireynaslide2').click(function(e) {
    			e.preventDefault();
    			$('.slider-link').removeClass('active1');
    			$(this).addClass('active1');
    			$('.swiper-pagination1 span:nth-child(2)').trigger('click');
    		});
    		$('#kireynaslide3').click(function(e) {
    			e.preventDefault();
    			$('.slider-link').removeClass('active1');
    			$(this).addClass('active1');
    			$('.swiper-pagination1 span:nth-child(3)').trigger('click');
    		});
    		$('#kireynaslide4').click(function(e) {
    			e.preventDefault();
    			$('.slider-link').removeClass('active1');
    			$(this).addClass('active1');
    			$('.swiper-pagination1 span:nth-child(4)').trigger('click');
    		});
      });
      $(document).ready(function() {
    		$('#kireynaslide11').click(function(e) {
    			e.preventDefault()
    			$('.slider-link').removeClass('active1');
    			$(this).addClass('active1');
    			$('.swiper-pagination2 span:nth-child(1)').trigger('click');
    		});
    		$('#kireynaslide22').click(function(e) {
    			e.preventDefault();
    			$('.slider-link').removeClass('active1');
    			$(this).addClass('active1');
    			$('.swiper-pagination2 span:nth-child(2)').trigger('click');
    		});
    		$('#kireynaslide33').click(function(e) {
    			e.preventDefault();
    			$('.slider-link').removeClass('active1');
    			$(this).addClass('active1');
    			$('.swiper-pagination2 span:nth-child(3)').trigger('click');
    		});
    		$('#kireynaslide44').click(function(e) {
    			e.preventDefault();
    			$('.slider-link').removeClass('active1');
    			$(this).addClass('active1');
    			$('.swiper-pagination2 span:nth-child(4)').trigger('click');
    		});
    	});
    </script>

Republish and let me know how you go!