bxSlider in Webflow tutorial

Step 1:

Copy the CSS style-sheet link to your page's <head> tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">

Step 2:

Copy jQuery.min.js & the bxSlider JS links before your page's </body> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

Step 3:

Add the <script> to activate the carousel, also before your page's </body> tag:

<script>

$(document).ready(function(){
	$('.carousel').bxSlider({
		pager: false,
		slideMargin: 30,
		controls: false,
		speed: 60000,
		useCSS: false,
		ticker: true,
		tickerHover: true,
		slideWidth: 300,
		responsive: false,
		minSlides: 1,
		maxSlides: 4,
	});
});
  
</script>

The red class name (carousel) can be changed to whatever you want,
but it must be the same one you give to your carousel wrapper.

All the blue properties are options you can change.
For example:
‍
ticker: true = makes the carousel seamlessly move nonstop.
tickerHover: trure = makes the carousel stop moving on mouse hover.
speed: 60000 = obviously... the speed of the carousel.

All options are detailed here

Step 4:

Add the carousel structure where-ever you want:

.carousel (Carousel wrapper div)

.Slide (div)

No need for styling on the carousel wrapper element, only a class name of 'carousel'
(or any other class name, in correlate to the script)

Step 5 (optional):

Copy this CSS code to your page's <head> tag:

<style>

.bx-viewport, .bx-wrapper {
	background: none;
	border: none;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	max-width: none !important;
}
.bx-viewport {
	padding: 40px 0 40px 0;
}
  
</style>

This step adds some styling to the default bxSlider components to:
- Remove borders
- Remove shadows
- Remove max-width

bxSlider in Webflow tutorial

A slider/carousel that can seamlessly autoplay (ticker)

Step 1:

Step 2:

Step 3:

Step 4:

Step 5 (optional):

Example:

That's it...