Streaming live at 10am (PST)

Custom Slider - 5 visible slides but translates 1 slide at a time


#1

Hi,

I’ve read quite a lot of the posts about sliders and how to customize the webflow component but I still quite can’t achieve what I’m looking for… And maybe my case can be useful for other people who want a similar slider :thinking:

What I’m trying to achieve :

  • 5 visible slides at all times
  • 2 slides hidden before
  • 2 slides hidden after
  • On click, shift to next or previous slide - one by one (and reveal the hidden ones)
  • When at one end of list disable controls

22

I’m currently using this method

• Slider component from webflow with overflow hidden and size of 5 slides > Mask has size of 1 slide but overflow active so that you can see more slides > controls are custom (so that they don’t conflict with the overflow hidden of slider component and can be outside of the slider element)

  • custom code to make the triggers work and set initial state of slider to middle slide

Here’s the code :

<script>
$(document).ready(function() {
		// On load change slide position
    $('.w-round div:nth-child(5)').trigger('tap');
    // Alternate Next button for the slider
    $( "#trigger-right-arrow" ).click(function(e) {
      e.preventDefault();
      $( ".w-slider-arrow-right" ).trigger( "tap" );
    });
    // Alternate Prev button for the slider
    $( "#trigger-left-arrow" ).click(function(e) {
      e.preventDefault();
      $( ".w-slider-arrow-left" ).trigger( "tap" );
    });
});
</script>

And here’s the page for now : http://elhorria.webflow.io/le-gite-familial-new-slider-demo
:slight_smile:

I’d like to achieve something like when .w-round div:nth-child(3) active > disable #trigger-right-arrow
and when .w-round div:nth-child(7) active > disable #trigger-left-arrow

Any ideas for that ? I’m not a js / jquery expert :cry:
My eternal gratitude for some code :slight_smile:

Cheerz

*** edit

Maybe something to do with w-active class and an if else statement with hasClass ?


#2

Ok, so I found a solution. But I’m not sure it’s super clean…
Here it is for those would try to achieve something similar :

<script>
$(document).ready(function() {
		// On load change slide position
    $('.w-round div:nth-child(5)').trigger('tap');
    // Alternate Next button for the slider
    $( "#trigger-right-arrow" ).click(function(e) {
      e.preventDefault();
      $( ".w-slider-arrow-right" ).trigger( "tap" );
      if ($('.w-round div:nth-child(7)').first().hasClass('w-active')) {
      	//console.log( "7th element active" );
      	$("#trigger-right-arrow").hide();
      } 
      else {
      	//console.log( "7th element inactive" );
        $("#trigger-right-arrow").show();
        $("#trigger-left-arrow").show();
      }
    });
    // Alternate Prev button for the slider
    $( "#trigger-left-arrow" ).click(function(e) {
      e.preventDefault();
      $( ".w-slider-arrow-left" ).trigger( "tap" );
      if ($('.w-round div:nth-child(3)').first().hasClass('w-active')) {
      	//console.log( "3rd element active" );
      	$("#trigger-left-arrow").hide();
      } 
      else {
      	//console.log( "3rd element inactive" );
        $("#trigger-left-arrow").show();
        $("#trigger-right-arrow").show();
      }
    });
});
</script>

Works like a charm, but maybe fires a bit to many events ?