Streaming live at 10am (PST)

How to create a logo slider


#1

Hey Guys,

i was wondering if it is possible to create a logo slider like in this example. I checked the webflow slider tutorials but didnt find an example like this one.


Best


Here is my public share link: https://preview.webflow.com/preview/koenigundsuess?preview=8304fa5de9e74d9bf62c61352c6d1001
(how to access public share link)


#2

You can make almost the same one with the slider component in Webflow.

Webflows slider component is made of several elements, you can take control of them by selecting them in the Navigator tab.

Give a class to the slider element to give it a width and height (full page width for instance)
Now take control of the mask element. The mask represents the active slide. So give it a smaller width and center it. Also, remove its overflow:hidden property so that previous and next frames will be shown.
Now it starts to look like your example.

Make it auto and loop. One thing you won't be able to do is have it already filling the full width on load. (or maybe try not to center the mask, rather stick it to the left? try this...)

Edit: I tried but the slider never stays full of slides..; the slider component isn't really made for that, sorry


#3

Hi Vincent,

i tried something and might have found a solution for the horizontal scroll issue. Just set the Section where the slider is inside to 100% width, display setting: inline and overflow: hidden.

Only thing is that i am now having issues with the hero section.


#4

How many logos do you have to show? Do you need to add or remove some often?

Because you could address this extremely easily with a few lines of CSS custom code. Make a strip imag with all your logos, add it as a background in a DIV then use CSS custom code to make a background animation that loops...

I use background animation here:

and here (hover the button):

It's all CSS, meaning the animation is extremely smooth.

learn the basics here: https://www.w3schools.com/css/css3_animations.asp

See many other examples here: http://codepen.io/search/pens?q=css+background+animation&limit=all&type=type-pens


#5

I have about 12 Logos atm. I think i could it reduce to 8-10. Honestly i would love to use some of those css tricks. The only thing is, that i dont have a clue about coding. I will check out the links.

Do you have a solution for the hero section issue? It came when i was working on the slider.


#6

the white bar? If I remove the interaction on the header, it stops moving up on load and there is no white bar.


#7

Yes. I am talking about the white bar. It is strange becaus i did not have it before i was working on the slider.

Now i dont know how to get rid of it again.

Update: I also found this: https://webflowcodestutorials.webflow.io/imagery-demos/constant-animated-slider
I just dont know how to implement it.


#8

@vincent

I have found a workaround, but its not perfect.
As i wanted to include 12 elements i create a slider with 3 slides (4 elements on each slider)
I used flexbox to center the elements and also even the space between them.

The trick is to set the animation mode in the slider settings to linear and make it really really slow. The bad part is, that it uses quite a lot of cpu and that you need to put the delay to a really big number too.

Is there anybody who has a better idea on how to do that inside the visual composer?

I mean this shouldnt be that difficult right?


#9

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