Help! How do i recreate this carousel slider and navigation effect?

Design help General
1

Hi friends,

I need assistance on how to recreate a carousel slider.
Also i want to know how to recreate the navigation effect on the navbar. I have some ideas but i need some pointers for the best fit.

I’ll always appreciate any help please

@sabanna, @cyberdave, @samliew

My public link: https://preview.webflow.com/preview/saatva-com?preview=62854e8b9e29218344cc4acb5b343275

2

Did I miss something? Where is the slider located?

3

Thanks

Its located at

4

What do you think i should do to achieve that?

5

This is possible with custom code.

This should have what you are looking for. :wink: slick - the last carousel you'll ever need

6

Honestly when it comes to custom code and deployment on webflow, i seem to have a weakness there. I was thinking if its possible to tweak the slider widget to achieve that. what do you think?

7

Hmm, interesting, honestly I have no idea how to do this natively in Webflow, other than custom code.

@sabanna maybe might have some awesome ideas though. :wink:

Sorry that I wasn’t able to help. :pensive:

8

Thanks, that link was valuable, keeping it for future use.

Really need an info on this asap

9

Something like this? http://custom-form-example.webflow.io/custom-slider

Really very rough example, sorry

2 Likes
10

Yes Sabanna, thanks!

How can i clone that please?

But your example is still showing a gap when it finishes the cycle, any method on how to cover the gap?

11

Here is my public link: https://preview.webflow.com/preview/saatva-com?preview=62854e8b9e29218344cc4acb5b343275

I have tried to get all the slides to move as it is but then there is a gap at the end of the cycle, how can i get rid of that gap?

12

@VladimirVitaliyevich

How do i use that slick on webflow?

13

Hello, @brilliantlights. Sorry for the delay with my reply.

I have been using this type of slider in one of my projects. There are “extra” images in the 1st and last slides.
But my slider had 3 slides and yours has to have 5. So gap will be not 1 image but 2 images from each end.

Here I set up better example Custom slider
Feel free to clone and look how it works: https://webflow.com/website/SAPDesign-sandbox

It is actually not hard, just add interactions to the last and first slides. Also, I strongly recommend in your case wrapping content of every slide with div and manipulate that wrapper class inside the interactions, instead of using just images as I did.

Regards,
Anna

2 Likes
14

Thank You very much. I’ll work on it and get back to you. :kissing_closed_eyes:

In btw, did you see the navigation bar, and how it transform when you begin to scroll? At the saatva.com site? how easily can i achieve that with interactions?

15

Hi Anna

I have gone this far:
https://preview.webflow.com/preview/saatva-com?preview=62854e8b9e29218344cc4acb5b343275

But then when i start sliding one of the slider image overlaps the other and the spacing is not even.
Please can you help me check it out and point in my erros?

Thank You

16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.