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

Community resources Webflow Tips
21

Hey Aviv.

Thanks for your reply. I actually found an alternative solution natively within Webflow.

Kind Regards,

Alec

1 Like
22

Hey Alec,

How did you fix it? I am having the same issue

23

Hey Njoku,

I used this method:

https://youtu.be/7Y3ochJTaKk

1 Like
24

Thank you so much Alec!

25

No worries! I hope it works for you.

26

@avivtech Do you know if thereā€™s a simple way to implement this vertically?

27

Did anyone find a solution to the loading wheelā€¦? Only seems to happen on Chrome at the moment. Hereā€™s the read only link: Webflow - change-makers

28

Running into the same problem on Firefox, didnā€™t find a fix yet :frowning: !

29

Hey friends,

I found a fix that works for me. Turns out that in the bx-wrapper class there is no width set for the wrapper itself, so I added ā€œwidth: 100%;ā€

Here is the updated code :

<style>

.bx-viewport, .bx-wrapper {
	background: none;
	border: none;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	max-width: none !important;
    width: 100%;
}

.bx-viewport {
	padding: 20px 0 40px 0;
}
  
</style>

Hope that helps :slight_smile:

1 Like
30

Hey @avivtech! Great tutorial, thanks for sharing :slight_smile: Iā€™m trying to implement this logic to a CMS collection list, but I had no luck :confused:

I feel like Iā€™m almost there though.

The scrolling works, but somehow the images are duplicated and overlapped, and the scrolling goes up to some point and comes back to the beginning abruptely.

Hereā€™s my readonly: https://preview.webflow.com/preview/alaskas-blank-site-b408a3?utm_medium=preview_link&utm_source=designer&utm_content=alaskas-blank-site-b408a3&preview=ebb729f9e758aac2b25336674a41895e&mode=preview

Thanks!
Isabela

31

Hey @isabelavdd
Can you share the live website?

32

Hey @avivtech thank you so much for putting out such an awesome cloneable! Iā€™m really excited to implement it into my current project.

1 Like
33

hey! sorry for the delay, hereā€™s the live website: https://alaskas-blank-site-b408a3.webflow.io/

34

So:
The duplication is the actual ticker, so it will be smooth.

I believe it displays wrong because of the properties you gave to the .carousel div in Webflow .
Try removing all properties from this div.

35

Hey!

I had no luck :confused: i removed all the properies and itā€™s still displaying it wrong. Aside from the images being overlapped and the abrupt movement at the end, it takes to long to start as well :confused:
Any guesses of what is doing that?

36

Ok, because the content is Dynamic, you have a list of items in each instant that the BxSlider creates.
That means that each of them needs to have the width of all the items in it.
Currently each instance has a width of 300px

Try removing the line slideWidth: 300, from the script

37

@avivtech awsome work. I duplicated your slider and it worked. But if I use your script on my CMS sliderā€¦ loadring wheel appear, do you know why?
https://preview.webflow.com/preview/cleafy?utm_medium=preview_link&utm_source=dashboard&utm_content=cleafy&preview=4b9ee8fdd4a3d4b4cc08a4ffa0658271&mode=preview

1 Like
38

Hi @ginka_studio
Check out the thread :arrow_up:, the issue was already solved earlier

39

I fix the width, but the carousel is static.
Here the linkā€¦ let me know.

40

@ginka_studio
I am sorry, but the BxSlider tutorial was originally created for static content and not Dynamicā€¦