bxslider example

by Michael Mandarino

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="slider-wrp">


<ul class="my-slider bxslider">
  <li><img src="http://via.placeholder.com/350x150&text=Slide 1" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 2" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 3" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 4" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 5" alt=""></li>
  <li><img src="http://via.placeholder.com/350x150&text=Slide 6" alt=""></li>
</ul>

</div>

SCSS

.slider-wrp {
	margin: 0 auto;
	width: 750px;
}

.my-slider {
  list-style: none;
  
  li {
  	width: 25%;
  }
  
  img {
  	width: 100%;
  }
}

JavaScript

$('.bxslider').bxSlider({
	//general
	speed:10000,
	slideMargin: 0,
	infiniteLoop:true,
	easing: null,
	useCSS:true,
	preloadImages: 'all',
	touchEnabled: false,
	wrapperClass: 'slider-wrp',
	
	//pager
    pager:false,
	//controls
    controls:false,
	
	//auto
    auto:true,
    autoStart: true,
    autoDelay:0,
	pause:0,
	autoDelay: 0,
	
	//carousel
    minSlides:1,
    maxSlides:5,
	moveSlides: 0,
	shrinkItems: true,
	slideWidth: 1500,
	slideMargin: 10,
});