Streaming live at 10am (PST)

Slider with count


#1

Hey Community,

I ask myself if slick slider is the right library to build a slider like this one:

Especially the count on left side I´m interested how to build.

Greetings,
Maurice


#2

Can nobody help with that?


#3

Hey there! I’ve seen slick slider before, but I’ll throw in an opinion to add some fun to the conversation :grin: Using a script for this type of site interaction may be over the top. The only reason to use a script for this type is to - allow scrolljack or scroll control. You can actually accomplish the same thing with a click trigger on; the number, a button or a pointer of some type to tell the user - how to move to the next slide/panel/page.

It would take a fair amount of planning but it’s possible. Of course a script may be just as complicated once to get into it, so I’d vote for click trigger over scroll trigger :mage:

I’d be interested to see how to work on this. Good Luck.


#4

Hi @garymichael1313,

thank you for your reply. I would use the slick slider of course of their “center mode”. So that I can show a part of the next slide, like here:

What I meant with slider count is the count of all slides and of the current slide.

image


#5

Gotcha, I see. Well that slider would probably work, but you can create this in Webflow with a Click Trigger. Give Slick a try and see how it goes, knowing that you can always jump in head first with interactions. :grin:


#6

Hi @garymichael1313,

if it is possible to do this purely in webflow, than can you please tell me how?


#7

Sure, send me a link to the sample website. I can view and see how they did it first.


#8

Hi @garymichael1313,

they did it with slick slider, but I don´t think you could do it with pure webflow. Anyway here is the link to the page.


#9

Yeah you can do this in WF. It’s just targeting different elements. The layering of divs is the “World metta peace, brain challenge”. :mage: As long as it’s click trigger, pretty much anything is possible. Hover triggers are the no go.


#10

And the count of all slides? The only possibility would be to hardcode them. Also I want to use the slider within a cms template.

The only solution I came up with are to implement slick slider, but I would really like to try to build it with webflow only.


#11

Nah hometeam, you just need to layer divs, that’s it. It’s how you show them, that take brain cell stress. haha. I’m heading out to eat, but I’ll hit ya back and explain how you can do it.


#12

Nah I don´t think that layering is here enough. To show part of the next slide you need to have an active slide state, so that you can lower the opacity of the rest.

But I´m really interested if you can rebuild the slider with webflow only how you would do it.


#13

Hahah… You wanna make a little bet? :mage: There’s this great little store you can visit:
https://proshop.patriots.com/products/ua-1-4-zip-tech-top-navy-010586?taxon_id=14

I’ll make an exact mockup and you visit that link - and send an XL? Deal?? or No Deal?? heehe.

Uh huh, it’s like that… ha… No biggie right. The active state comes from the States - Focused. All those side page identifications are stacked with top one absolute.


#14

You do a little “salad” :slight_smile: Your reference is pure Ajax page transitions - custom code (A lot of) - or by Libraries like http://barbajs.org/index.html

Your example is more AAAwards style site (Again - a lot of custom FrontEnd code).

In general - this is not a slider - you can not “attack” this with slider. Anyway by slider you could create the screenshot example - even on Webflow site (Template detials) you have ± this idea (Opacity un-active slide + active mode 100% opacity) - see her (scroll a little)

Or very cool Slider is this one:
https://flickity.metafizzy.co/
Example:

counter 1/4…2/4…3/4…

No way for now by the UI to add counter. But this is great idea for wishlist - for 3-4 slides you can add this idea manually (Add Text)

The arrow (VERTICAL) - by css writing-mode (Maybe try to add transform without animation). Why not inspect element and see the styles? (Than add this code to your site)

Not very well browser supported yet (So no Way webflow add this to the UI):
writing-mode: vertical-rl;


#15

Hi @Siton_Systems,

first of all thank you for your reply.

Could you please explain exactly how this can be done in webflow?

I need the slider within a cms template, so it would be unfavourable to write the counter hard. In the one cms item I will have 3 slides and in the other 4 and I will display something like “slide 02/04”.

Yeah, they worked in the whole website with the “writing-mode” property, but in my opinion it is already widely used. Take a look here.


#16

Looks like webflow themselves uses slick slider for this, as you can see @Siton_Systems.


#17

I already told it’s possible, but heeyyyy don’t listen to me :joy::no_mouth: Haha, I can’t wait to see what you come up with.


#18

Yes. Beacuse this is a slider with custom style - why not?..Webflow slider is not with endless options like slick or swiper (For now :slight_smile: )

I said in general the site you added is with a lot of custom frondend code (AAAwards site) - Specific about the slider section - slick is cool try to use it on your site (search the forum you find a lot of tutorials)


#19

True, true… I was just teasing ya. I do really really like the Slick. It seems super easy to implement.


#20

I will do it with slick and if I got the result that I´m looking for, I will give an update here.