Slider with different interactions?

Design help Animations & Interactions
1

Hello everyone,

I was wondering if it’s possible to make a custom slider like this :

http://www.minititle.com/news/4586/46078/

The goal is to be able to swipe or click the little dots to slide the pictures. And when you click on it, it goes to the next one without any sliding.

Thanks,
Corentin

2

Hello Corentin,

That’s an awesome example!

Something similar can be designed in Webflow when it comes to the style of a slider like this. I went ahead and made a clonable copy as a good foundation to experiment with.

The tricky part will be adding the additional interaction when the images are clicked on and the slider moves to the next position. Some of it could be done using interactions and manipulating the position of each slide on a click, but it might conflict with some pre-built code that comes with the Slider element; to where a more custom code solution might be necessary.

Hopefully this helps in any way, and let me know if you have any other questions.

Riley

3

Hi @RileyJones,

Thanks for the help and the clonable project!

Could you explain a bit more about what kind of interactions I could work with? Because I had the two-column slider part figured out, it was really more about the sliding vs click interactions. But you are saying it would be more about custom code than interactions if something was possible, right?

Thanks,
Corentin

4

If I were to create this type of interaction I would not use a slider, but rather interactions. Have my dot(s) image be a clicker to slide the image(s). Make two transparent buttons the interaction to appear the next image(s).

5

I was thinking about this method and I think it will end up this way, but then I still wouldn’t have the swipe gesture. But i guess this would require some custom code and i don’t have the knowledge for this, but i’ll keep looking!