Streaming live at 10am (PST)

How to create this slider experience


#1

Hi Guys,

I'm trying to create a slider with elements outside the standard L/R arrows and nav to control slide transition. See below, UX detailed also.

Currently I've got the 4 col elements sitting inside the slider mask so that they're visible.

I've had a look at trying to make the arrow or nav elements in the slider control page transition via the 4 col elements but I'm a bit a lost.

Is it possible to achieve the request experience or should I just keep the slides static for now?

Thanks!


#2

I hope you will find it usefull wink
http://quick.as/vrntezx


#3

@bartekkustra nice, that's how i would do it currently.

just hoping for an update sometime on the slider where we can have custom images for each "slide navigation button".


#4

You legend @bartekkustra. We gotta find a way to thank you for helping us out smile


#5

I've already said on forum how to change images on slider icons smile I'll try to find it later. I have a loooooooot of posts to look inside for the answer smile But that might be the current answer for your task smile Glad you like it wink


#6

Hello,

The linked video shows how to change states for the faces... What I would need is to have the faces control the slider and jump to the corresponding slide.

How to achieve this?

Thanks,

Gabriel


#7

This may come a little late, but I have solved this as I needed it badly.

Here's what I used:
I have a regular slider with the dots at the bottom. I have hidden that DIV and replaced it with a new DIV (.heads) that contains as many DIV-s as heads you have (.head). The slider is called .testimonial-slider on our site.
The only solution I found is to simulate a click on the dots when you click on one of the faces.

Here's the code I added to the page in the before section:

<script>
    var Webflow = Webflow || [];
    Webflow.push(function() {
	    $('.heads').children().on('click', function(e) {
  	    var index = $('.heads .w-inline-block').index(this);
		$(".slider-navigation-dots").children().eq(index).trigger('tap');
	    })
    });
</script>

You may need to adapt the script to your needs however, this worked for me.

We use it here http://p92rdi.hu/karrier around the middle of the page.

This could be improved to change the .active class over the heads for example.

Cheers,

Gabriel


#8

#9