Easy Responsive Image Carousel & Slider Plugin - jQuery SkySlider

SkySlider is a small and simple-to-use jQuery plugin to create a fully responsive image carousel or slider that features infinite loop, auto play, callback function, custom animation speed and more.

Available modes:

• Slider: crossfading effect.
• Carousel: horizontal scrolling.

How to use it:

1. Import jQuery library together with the SkySlider plugin's files into the html file.

<link href="css/slider.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/slider.js">

2. Add your images together with caption text and navigation controls to the slider/carousel.

<div class="slider demo" id="slider">
  <div class="slider_viewport">
    <div class="slider_list">
        <div class="slider_item">
          <div class="slider_item-content">Caption 1</div>
          <img src="1.jpg"/>
        </div>
        <div class="slider_item">
          <div class="slider_item-content">Caption 2</div>
          <img src="2.jpg"/>
        </div>
        <div class="slider_item">
          <div class="slider_item-content">Caption 3</div>
          <img src="3.jpg"/>
        </div>
        <div class="slider_item">
          <div class="slider_item-content">Caption 4</div>
          <img src="4.jpg"/>
        </div>
      </div>
  </div>
  <div class="slider_nav">
    <div class="slider_arrow slider_arrow__left">
    </div>
    <div class="slider_arrow slider_arrow__right">
    </div>
  </div>
</div>

3. Initialize the plugin to create a basic image sldier.

$('#slider').skySlider();

4. Initialize the plugin as an image carousel.

$('#slider').skySlider({
  carousel: true
});

5. Set the interval and duration in milliseconds.

$('#slider').skySlider({
  interval: 3000,
  duration: 500
});

6. Specify the number of images to show per slide.

$('#slider').skySlider({
  items: 2 // default: 1
});

7. Enable/disable the autoplay functionality.

$('#slider').skySlider({
  autoplay: true // default: false
});

8. Enable/disable the infinite loop functionality.

$('#slider').skySlider({
  loop: false // default: true
});

9. Get the current slide index.

$('#slider').skySlider({
  callback: function(number) {
    console.log('Current slideSet - ' + number);
  }
});

10. Get the total number of slides.

$('#slider').getSlideSetsCount();

---

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