Dynamic Responsive Slider Based On Bootstrap - jsSlider

jsSlider is a super tiny jQuery plugin that dynamically renders a fully responsive image slider from an array of objects containing image links and alternative text.

Based on Bootstrap's stylesheet. Supports both Bootstrap 4 and Bootstrap 3 frameworks.

Also provides a View link displayed above the image that enables the visitor to view the current image in a new browser tab/window.

How to use it:

1. Include the necessary jQuery library and Bootstrap's Stylesheet on the web page.

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

2. Create an empty container to hold the image slider.

<div class="sliderContainer"></div>

3. Define an array of image data to be presented in the slider.

var images = [{
      src: '1.jpg', 
      alt: 'Image Alt 1'
    },{
      src: '2.jpg', 
      alt: 'Image Alt 2'
    },{
      src: '3.jpg', 
      alt: 'Image Alt 3'
    },{
      src: '4.jpg', 
      alt: 'Image Alt 4'
    },{
      src: '5.jpg', 
      alt: 'Image Alt 5'
    }
]

4. Initialize the image slider an done.

$(function(){
  $('.sliderContainer').jsSlider(images);
});

5. Set the fix height of the image slider.

$(function(){
  // height = 500px
  $('.sliderContainer').jsSlider(images, 500);
});

---

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