Hi Community,
for a project, I need to build a slider with custom arrows and a custom navigation. The slider is working fine with one exception and that is to keep the navigation of the slider synced with the slider. The navigation shows the active slide perfectly if you use only the navigation, but if you switch to the arrows the navigation won’t keep up sync.
Here is the live-site and also the read-only. Also, I drop my custom code below. Hopefully somebody of you have a nice solution for this.
// Feauture Slider
// New navigation instead of the dots
$('#slide-1').click(function(){
$('.w-slider-nav div:nth-child(1)').trigger('tap');
$('#slide-2').removeClass('is--active');
$('#slide-3').removeClass('is--active');
$('#slide-4').removeClass('is--active');
$('#slide-5').removeClass('is--active');
$(this).addClass('is--active');
});
$('#slide-2').click(function(e){
e.preventDefault();
$('.w-slider-nav div:nth-child(2)').trigger('tap');
$('#slide-1').removeClass('is--active');
$('#slide-3').removeClass('is--active');
$('#slide-4').removeClass('is--active');
$('#slide-5').removeClass('is--active');
$(this).addClass('is--active');
});
$('#slide-3').click(function(){
$('.w-slider-nav div:nth-child(3)').trigger('tap');
$('#slide-1').removeClass('is--active');
$('#slide-2').removeClass('is--active');
$('#slide-4').removeClass('is--active');
$('#slide-5').removeClass('is--active');
$(this).addClass('is--active');
});
$('#slide-4').click(function(){
$('.w-slider-nav div:nth-child(4)').trigger('tap');
$('#slide-1').removeClass('is--active');
$('#slide-2').removeClass('is--active');
$('#slide-3').removeClass('is--active');
$('#slide-5').removeClass('is--active');
$(this).addClass('is--active');
});
$('#slide-5').click(function(){
$('.w-slider-nav div:nth-child(5)').trigger('tap');
$('#slide-1').removeClass('is--active');
$('#slide-2').removeClass('is--active');
$('#slide-3').removeClass('is--active');
$('#slide-4').removeClass('is--active');
$(this).addClass('is--active');
});
// New navigation END
// New arrows
$('#new-left-arrow').click(function(){
$('#left-arrow').trigger('tap');
});
$('#new-right-arrow').click(function(){
$('#right-arrow').trigger('tap');
});
// New arrows END
// Feature Slider END
Edit: Maybe @samliew has an idea?