โ–ผ
Streaming live at 10am (PST)

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

Hey! It workedddd! Thank you so much :slight_smile: The only thing left is that the first and last image are overlapped. Any ideas of how I can solve this last detail?

Thank you for your help aviv :slight_smile:

Hi Guys! I am having trouble getting the controls to show? (i.e. controls: true,) any thoughts or guidance on this would be greatly appreciated. Thanks!

Hi Aviv!
First of all, thanks a lot for this slider.
But I have a problem. Endless Initial download. Checked in Chrome, Firefox, Opera, Edge.

Please take a look if you have the opportunity.

Read-only link: Webflow - Kaspar&

Published: Anlageziele

Seems like the loading animation is a bug in the BxSlider code.
It can be ignored by adding this css code:

<style>
.bx-loading {
  display: none;
}
</style>

or adding a div with a classname of bx-loading and hiding it.


*Although this will probably solve the issue, I recommend using a different slider.
TinySlider2 is my current favorite-

Thank you for your quick response! The issue with Loading Animation has been resolved. But now there is another problem. The slider does not start. The only browser where everything works is Tor.

Is TinySlider2 has a seamless auto move option and stop move on hover?

You mean this slider? seems ok
image

Yes
autoplay
&
autoplayHoverPause

Very helpful with all your responses here Aviv, so thank you for that!

I also have the overlap issues that other have commented here. You can find it here: https://roiroi-ab.webflow.io/ and itโ€™s especially for mobile which is not really working. Any ideas how to fix?

Hey @vemilson ,
Can you guide me to where exactly you see overlaps?

Hi Aviv,

Please see the attached image.

I also think it would happen on any device (meaning desktop as well) if I would add more images that eventually would make it overlap.

Thanks again for your help!

Please share a read-only link

Here you go:

https://preview.webflow.com/preview/roiroi-ab?utm_medium=preview_link&utm_source=designer&utm_content=roiroi-ab&preview=4919e5a9f6e64a0e4bb08ba104d0e4ab&workflow=preview

Try adding a slideWidth option that sets each slides width.

I added slideWidth: 300 now. Still overlaps and breaks the design of the desktop (doesnโ€™t fill the width)

Changed it to slideWidth: 1280 now and that fixes the desktop issue. But still mobile overlap.

Hmmโ€ฆ I see.
Try this method:

for all people with the problem in chrome (Spinner shown), there is a simple fix:

Instead of

$(document).ready(function(){
	$('.carousel').bxSlider({

you should use:

$(window).on('load',function(){
	$('.carousel').bxSlider({

found this at jquery - bxSlider not working on first load for Chrome - Stack Overflow