Streaming live at 10am (PST)

Custom slider keeping arrows synced with navigation


#1

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? :thinking:


#2

Does nobody have an idea?

Edit: Push


#3

Hey there,

The way you designed this, simply remove the arrows. You don’t need them because your buttons say it clearly. If I want to see what each button shows, I just click - simple. I’d suggest deleting the arrows because the slider works. Keep those buttons they’re super clear on what to do.


#4

Hi @garymichael1313,

the problem is that the client wants both the arrows and the buttons.


#5

Hi @Maurice,

I was facing a similar challenge the other day and I was able to make a custom slider with arrows and links which are staying in sync.

It is also only made with Webflow interactions and doesn’t have any custom code.

The only thing that I didn’t manage yet is to add an auto slide behaviour. As long as your not needing this that should make the trick for you.

It would be a bit confusing to explain here by writing but I’m putting up together a video tutorial for it which might be ready this weekend if I have a bit of time.

Hopefully it will be handy for you and others needing sliders inside of Webflow.

Max


#6

Hi @Maximosaurus,

that sounds great. I’m really excited to see your video tutorial.

Greetings Maurice


#7

Hey @Maurice,

Here is the video tutorial I told you about, hopefully that will give you some tips to approach the custom slider you were trying to setup.

Enjoy :slight_smile: