[Tutorial] How to add bxSlider in Webflow (ticker style carousel)

Community resources Webflow Tips
1

Hello Webflow heads :wink:

A short tutorial on how to implement a slider that has a seamless auto move option.

It is a 5-steps-tutorial with video screen captures and explanations (I tried to make it as simple and easy to understand as I could :smile:)

Here’s the tutorial page:

And here’s the cloneable project page:

:webflow_heart:

12 Likes
2

Hey @avivtech

Thanks for sharing with the community!

Piter :webflow_heart:

1 Like
3

Hi @avivtech!

Gosh, thank you so much for this share. I’m new to webflow, trying to build a site and a complete newb to coding. Love how simple you presented this but accck so sorry, this might be such an easy newb question but… how do I implement step 4?

How do I add the carousel structure? And the boxes with the images to begin with… So sorry if this is a basic question - been studying the webflow university videos and I’m so lost still! What is the carousel wrapper element/ div?

Any layman (like totally new to webflow layman level) direction from anyone would be greatly appreciated!

P.s. The effect that I’m trying to create is how this page seems to have a ticker style carousel for its text, looping across the front page.

Any thoughts would be so so so helpful!

1 Like
4

Hi Andrew! Welcome to the forum :smiley: :webflow_heart:
This is a great place to ask any question! even if you feel like it’s a newb ;)

To your question-

  1. You can simple copy the element in the example and use it (it is a project you can clone)
  2. The structure is a wrapping div, with the class of .carousel and children divs inside it, which are the slides. In these children divs you can place your content.
1 Like
5

Shucks, thanks so much for the warm generous welcome @avivtech! Really appreciate it + what you share with the community :slight_smile:

Ahhh, feel like this might be a silly basic question but how do I copy the element in the example of your page and use it/ clone in the designer? :sweat_smile:

6
7

Hi Avivtech,

Thanks for this great Slider.

I need this to work on every page of my site, unfortunately I can only get it to work on the home page.
I’ve tried putting the code in each page, and also tried putting the code in the ‘setting’ panel in the ‘custom code’ section. Still only works on the home page??

https://iss-scotland-new.webflow.io/

Any suggestions?

Thanks
Simon

1 Like
8

@simonjelks this is probably due to an old version of the BxSlider Javascript file.
I have updated the tutorial with the latest files to be used :slight_smile:

9

Thanks for the prompt reply Avivtech, now working. :0)

1 Like
10

@avivtech - I cannot seem to add more than a couple slides…

Any idea why?

https://preview.webflow.com/preview/urban-grocer-splash?utm_medium=preview_link&utm_source=designer&utm_content=urban-grocer-splash&preview=eb832430cd1db85b129c589310972291&mode=preview

11

It is probably the native Weblfow container that you use as the container. Try with a regular DIV

12

@avivtech This is awesome! Do you know how to change the width of the slides? Seems they get set to 300px by default regardless of how I style the .slide div.

Thanks for putting this together and sharing.

13

Hi Jack,
In the custom code there’s this line which makes the slides 300px wide:
slideWidth: 300,

1 Like
14

Ah, yes. Ugh – checked there! Overlooked it I guess haha. Thanks a bunch!

15

Do you know how i’d make that responsive? Like a separate width for the mobile breakpoint?

16

If you simply remove the slidewidth option then it become responsive (to some extent). You should go over the Docs HERE to fully customize for your needs.

1 Like
17

Anyway to dynamically add your instagram feed?

IE. When you post something on IG it will show up in the slider?

18

@JustinR
Definitely! you can do that with an automation tool like Zapier/Integromat/Parabolahq

19

Hey @avivtech thanks for sharing this. I am having problems with it loading on my page, I am getting the loading wheel when the page finishes loading:

Capture
Capture1239×830 12.6 KB

Sometimes when I hard refresh the page it will start working… any ideas?

Thanks!

1 Like
20

Hi @Alec_Wren, can you share a read-only link?