Responsive Card Slider (Carousel) Plugin For jQuery

A responsive, Material Design inspired image carousel slider for jQuery that supports any images with varying heights and works perfectly on both mobile and desktop.

How to use it:

1. Load jQuery library together with the slider.css and slider.js in the document.

<link rel="stylesheet" href="css/slider.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/slider.js"></script>

2 Create the html and insert your own images to the carousel slider using the img-src attribute instead.

<div class="section">
  <div class="slider" slide-interval="6000">
    <div class="slide active">
        <div class="slide-img" img-src="1.jpg"></div>
        <div class="substrate"></div>
        <div class="slide-text">
          <h4>Slide 1</h4>
          <p>Slide 1 Content</p>
        </div>
    </div>
    <div class="slide">
        <div class="slide-img" img-src="2.jpg"></div>
        <div class="substrate"></div>
        <div class="slide-text">
          <h4>Slide 2</h4>
          <p>Slide 2 Content</p>
        </div>
    </div>
    <div class="slide">
        <div class="slide-img" img-src="3.jpg"></div>
        <div class="substrate"></div>
        <div class="slide-text">
          <h4>Slide 3</h4>
          <p>Slide 3 Content</p>
        </div>
    </div>
    <div class="slide-pre"></div>
    <div class="slide-next"></div>
  </div>
</div>

3. Change the time interval.

<div class="slider" slide-interval="5000">

---

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