Need help to build a custom slider with ix 2

Design help General
#1

Hi Community,

I need to build a very specific custom slider within webflow and I have no idea to build it.
Below is a scribble that shows what I’m trying to accomplish.

The images should slide through depending on which button was clicked. Does anybody of you have an idea how to build this with webflow?

PNG-Bild-356D89E911EA-1
PNG-Bild-356D89E911EA-1.jpg2732×2050 235 KB

Greetings
Maurice

#2

Hi @Maurice

Could it work with tabs? Maybe use the tab as an IX2 trigger which animates the image into view ‘slider style’?

#3

I believe that I can’t archive the layout that I sketched above with tabs.

How should this work, for a slide effect the tab content containers must line up in a single row?

#4

Ok, I did the trick with the slider widget and some custom jquery, but I would really want to know if its possible to do the trick without custom code.

Here is the code I wrote:

// Community Slider
  $('#slide-1').click(function(){
  	$('.w-slider-nav div:nth-child(1)').trigger('tap');
    $('#slide-2').removeClass('is--active');
    $('#slide-3').removeClass('is--active');
    $(this).addClass('is--active');
  });
  $('#slide-2').click(function(){
  	$('.w-slider-nav div:nth-child(2)').trigger('tap');
    $('#slide-1').removeClass('is--active');
    $('#slide-3').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');
    $(this).addClass('is--active');
  });
  //Community Slider END

And here is the link to a live example (Read-Only):
http://custom-slider-example.webflow.io/

#5

Ah, I see what you mean - good solution with the code though

#6

Thx, but I’m really interested if this is possible with webflow only, too.