Responsive Stacked Card Carousel - jQuery Slides.js

A responsive carousel script which slides through a set of slides with navigation arrows and pagination bullets just like stacked cards.

How to use it:

1. Load the needed JavaScript and CSS files in your HTML page.

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

2. Insert slides into an HTML unordered list as follows:

<div class="glide__container" id="wiz-glide">
  <ul class="glide__slides">
    <li class="glide__slide" id="slide-1" data-slide="1">
      <div>
        <h2>Slide 1</h2>
        <p>Slide 1 Content</p>
      </div>
    </li>
    <li class="glide__slide" id="slide-2" data-slide="2">
      <div>
        <h2>Slide 2</h2>
        <p>Slide 2 Content</p>
      </div>
    </li>
    <li class="glide__slide" id="slide-3" data-slide="3">
      <div>
        <h2>Slide 3</h2>
        <p>Slide 3 Content</p>
      </div>
    </li>
    <li class="glide__slide active" id="slide-4" data-slide="4">
      <div>
        <h2>Slide 4</h2>
        <p>Slide 4 Content</p>
      </div>
    </li>
    <li class="glide__slide" id="slide-5" data-slide="5">
      <div>
        <h2>Slide 5</h2>
        <p>Slide 5 Content</p>
      </div>
    </li>
    <li class="glide__slide" id="slide-6" data-slide="6">
      <div>
        <h2>Slide 6</h2>
        <p>Slide 6 Content</p>
      </div>
    </li>
    <li class="glide__slide" id="slide-7" data-slide="7">
      <div>
        <h2>Slide 7</h2>
        <p>Slide 7 Content</p>
      </div>
    </li>
  </ul>
</div>

3. Create navigation arrows.

<div class="glide__arrows" data-glide-el="controls">
  <a class="glide__arrow glide__arrow--prev" data-glide-dir="<">&#10094;</a>
  <a class="glide__arrow glide__arrow--next" data-glide-dir=">">&#10095;</a>
</div>

4. Create pagination bullets.

<div class="glide__bullets" data-glide-el="controls[nav]">
  <a class="glide__bullet" data-slide="1" id="button-1">
    <div></div>
    Slide 1
  </a>
  <a class="glide__bullet" data-slide="2" id="button-2">
    <div></div>
    Slide 2
  </a>
  <a class="glide__bullet" data-slide="3" id="button-3">
    <div></div>
    Slide 3
  </a>
  <a class="glide__bullet active" data-slide="4" id="button-4">
    <div></div>
    Slide 4
  </a>
  <a class="glide__bullet" data-slide="5" id="button-5">
    <div></div>
    Slide 5
  </a>
  <a class="glide__bullet" data-slide="6" id="button-6">
    <div></div>
    Slide 6
  </a>
  <a class="glide__bullet" data-slide="7" id="button-7">
    <div></div>
    Slide 7
  </a>
</div>

5. Wrap them into the carousel container. That's it.

<div class="glide__main" id="wiz-glide">
  <!-- Slides Here -->
  <!-- Navigation Arrows Here -->
  <!-- Pagination Bullets Here -->
</div>

---

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