Streaming live at 10am (PST)

How can I make my slider continuously rotate?

I would like for the logo slider in the retailer sections of my site to continuously rotate smoothly from right to left. Right now it is just changing like a normal slider. Is this possible?

https://preview.webflow.com/preview/potters-cannabis-co?utm_source=potters-cannabis-co&preview=ae8f9ca2cbdcf6adce33863afdff0201

You control the behavior of the slide with the Animation Type settings.

CloudApp

That is where I am but I cant make it move continuously like a carousel.

Yours is set to Fade not slide

Yes, sorry, I have it on fade right now because I cannot achieve the desired slide affect I want. It is hard to explain so here is an example on another site: https://torreyholistics.com/
If you scroll down you can see the brand slider only moves one logo at a time. Is it possible to achieve this in Webflow?

Is this what you are after?

edit: ah, I understood, you want to slide only one item at a time with multiple visible at the same time, correct?

Exactly, It would be even better if I could get a VERY slow continuous slide that never stops. Either works for me, I have been stumped for some time on this haha

You don’t really need a slider for this. Just create a row of items and animate their perpetual motion with interactions.

The problem that I run into is, how do I fit all 18 in a row before I can start the animation since only 5 show at a time?

With absolute positioning. Or what exactly do you mean by “fit”?

I don’t know how to lay all of the photos sides by side because there are 18 of them. To get around this I tried to make a CMS List with all of the brand logos but I cannot get that to move horizontally either, they just show up in a grid and not side by side(see pic) I thought this was an overflow problem but I messed with the overflow settings didn’t change anything.

Why do you want all 18 to show up in a row?

You would need an extremely large screen to see them all anyways.

Well only 5 of the logos would be visible at a time and the remainder would be out of view until they rotated into view from the right like on this site: https://torreyholistics.com/

Does this make sense?

Yes it does. But you will need some custom code for the single image slide and rest view.

Here try this: https://www.solodev.com/blog/web-design/adding-an-infinite-client-logo-carousel-to-your-website.stml

You can keep the images in CMS and use the embed feature and add the links from CMS where is asks for image source, rather then using an external image host service or adding all and getting the link from Webflow Assets panel. However you choose. You can choose how images show.

Looks like this will work for you tho. Follow instructions.

Let me know how this works for you?

You are a legend! Thank you so much man. I have it working I just need to edit the sizing and center the alignment!

1 Like

@WebDev_Brandon Question about getting this to function as I think the solodev solution will work great for the site I’m working on. I’m just not sure where to add everything. Should the custom css file they provide be hosted publicly somewhere or should I just copy and paste its contents somewhere in webflow? Same with the carousel.js file they say to create. Should I make a hosted file somewhere or paste it directly into webflow? Thanks for any help!

Hi @theecarls Carly,

You do not need to host anywhere else. The instructions tell you what to do.

The JS file you can have to just the page itself in an html embed element. in step 4 the 4 js files can be added to the before </body> tag in the page settings.

TBH, Ive never needed to use this, I would ask @David_Casey on his final outcome and what he did.

Thanks, I’ll try it again. Just wanted to ask you since you were shown as being active and he hasn’t been around since July. :slight_smile:

For anyone researching this topic, this seems to be a much smoother solution. https://bxslider-tutorial.webflow.io/

2 Likes

Hi Carls,

do you remember your steps for this?
I’ve copied the script/css/js into the tags but I’m not sure how it chooses the images I want and also how to place it in my WF page where I want it.

Thx