How can i realize this kind of slide/design? Two slider linked from 1 button

Design help General
1

Hello great community, i need a big help :frowning:

i need to develop these two kind of section in a landing page, but i have no idea if webflow is capable.

2018-10-03_20-07-01
2018-10-03_20-07-011192×789 52.4 KB

How is possible to develop the slide above? i need that a user can clic on the blue line and move forward to the next text and right images

2018-10-03_20-09-00
2018-10-03_20-09-001257×844 221 KB

Here i need to clich on the left/right arrow on the image and change de image and text on the red rectangle, also change the line under the text.

Can anyone suggest me the right way to follow or can help me with a importable project?

I’m really frustrated with this

2

I have one of those tutorials lying around somewhere

Search results for '@samliew category:4 in:first order:likes' - Forum | Webflow

2 Likes
3

Bonjour @lebonWeb,

@samliew tutorial is really well made and probably would be the most flexible starting point.

I did quite recently 2 video tutorials to make custom sliders without any custom code in Webflow. You could turn most of the tricks in these to achieve what you are trying to achieve.

Let me know if you need any extra explanations.

I hope it will help you out.

Max

4

Thank you so much!!! I’ve added this snippet following your advice in your post regarding the linking of two sliders.

var Webflow = Webflow || [];
Webflow.push(function () {
      
// Cache references to nav elements
var sourceNav = $('#sourceNav');
var targetNav = $('#targetNav');
var currentSlide = 0;
// Every 200ms
setInterval(function() {
        // Find the index of source slideNav button's active class
        var index = sourceNav.children('.w-active').index();
          
        // Prevent tap on current
        if(index !== currentSlide){
	    // Update target slider by triggering a "tap" event on the targetNav corresponding slide button
	    targetNav.children().eq(index).trigger('tap');
	    currentSlide = index;
        }

}, 200); // End interval

});

Here a video of the second slider test: TESTSIMONE.webm - Google Drive

Now in this page, I have 3 section with 3 different double linked slider

I need only to duplicate the code and use a different id for the slider navigator?
Also, how can I customize the nav bar bullet?

5

Yes, that is one way to do it.

You will have to use custom CSS code to override the styles.

6

Great! :slight_smile:

Could you please share the empty CSS snippet to implement?

7

Here is some empty CSS code for you to get started, fill it with the styles you want:

<style>
.w-slider .w-slider-nav > div.w-slider-dot {

}
.w-slider .w-slider-nav > div.w-slider-dot.w-active {

}
</style>
1 Like