Help with the slider!

Community resources General
1

Hello guys!

I am pretty new to web design and been learning Webflow for a few months. I am designing my portfolio at the moment, and I need your ideas on how to build a slider.

I would like to make a slider like this in the picture. I can build it visually but that is of course not enough. I would like to have the main slide (no.2) in the middle (covering 50-60%) and two others left and right, be smaller and blurred. When clicked on the slides (1 and 3) themselves, nav dots or arrows, I would like them to come up in the first plan and the one that was originally there to go on the side and also get blurred.

Web 1920 – 1
Web 1920 – 12156×1080 229 KB

potentially, I would like to add min 6 slides, which would be coming in a circle from 1 to 6. Two slides out of the viewport represent that.

I hope I am clear enough with my wish and hope to see your ideas soon :slight_smile:

2

Hello Darko,
did you already get a solution for Your Problem, i am looking for the same :slight_smile:
Kind Regards
Ramin

3

Hello Ramin.

I found an alternative, it is very close to this idea I had.

Check this clonable slider from @Sketchz_Lab : https://webflow.com/website/Slider-Custom-Transition-Change-slider-size-and-focus?rfsn=1238427.48b8d&subid=flowbase

The only issue I am finding is that the slider starts with the 1st slide, but I would like it to start with the 2nd one, and have the 1st one on the left, for the nicer balance. It is apparently not possible to be done in WF, so I will try it with some custom code once I pay for the subscription

4

Hey, Darko.
You can include a script to click on the 2nd slide on page load. Thus, the left side won’t be left empty on default. :wink:

$('.w-slider-dot:nth-child('2').click();