How to create this slider experience

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!

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

4 Likes

@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”.

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

1 Like

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

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

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 Not Found around the middle of the page.

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

Cheers,

Gabriel

2 Likes