Responsive Card Slider (Carousel) Plugin For jQuery

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.

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.

  • Publication date: 15.02.2018
  • Source