Responsive Image/Video Slideshow Plugin - jQuery Bo-Slider

File Size: 7.19 KB
Views Total: 15341
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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.


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

  slideShow: true,
  interval: 5000

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

  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.