Responsive Image/Video Slideshow Plugin - jQuery Bo-Slider

The Bo-Slider jQuery plugin helps you create a responsive, infinite-looping slideshow/carousel that supports both images and videos.

How to use it:

1. Create the slideshow/carousel from an HTML unordered list:

• data-url: define the path to images or videos
• data-type: image or video

<ul class="bo-slider">
  <li data-url="1.jpg" data-type="image"></li>
  <li data-url="2.jpg" data-type="image"></li>
  <li data-url="3.jpg" data-type="image"></li>
  <li data-url="video.mp4" data-type="video">
  <li data-url="4.jpg" data-type="image"></li>
</ul>

2. Download and load the Bo-Slider plugin's files in the html page which has jQuery library loaded.

<link rel="stylesheet" href="style.min.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="script.min.js"></script>

3. Call the main function boSlider on the HTML list to create a default slideshow/carousel.

$(function(){
  $('.bo-slider').boSlider();
});

4. Enable/disable the autoplay mode and config the interval in milliseconds. Default: true.

$('.bo-slider').boSlider({
  slideShow: true,
  interval: 5000
});

5. Enable/disable the crossfade animation. Default: 'slide'.

$('.bo-slider').boSlider({
  animation: "fade"
});

---

This awesome jQuery plugin is developed by Smbo-2002. For more Advanced Usages, please check the demo page or visit the official website.