Minimal CSS3 Animated Carousel Plugin With jQuery - Mustang.js

Mustang.js is a lightweight, responsive jQuery slider / carousel plugin which enables the user to slide through any web content using CSS3 transitions and transforms.

How to use it:

1. Place jQuery library and the jQuery Mustang.js script at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="mustang.js"></script>

2. The basic html structure.

<section class="slider" id="slider">
  <article class="item">
    <h2>This is slide 1</h1>
  </article>

  <article class="item">
    <h2>This is slide 2</h1>
  </article>

  <article class="item">
    <h2>This is slide 3</h1>
  </article>

  <article class="item">
    <h2>This is slide 4</h1>
  </article>

  <article class="item">
    <h2>This is slide 5</h1>
  </article>
</section>

3. Add next/prev navigation buttons to the slider.

<a href="javascript:void(0);" id="prev"><</a>
<a href="javascript:void(0);" id="next">></a>

4. Add the following CSS snippets into your existing CSS file.

.slider {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: nowrap row;
  overflow: hidden
}

.slider article {
  flex: 0 0 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform .7s ease-in .2s;
  background-color: #FBB600
}

.slider .item {
  z-index: 10;
  display: flex;
  flex-flow: wrap row;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center
}

#next, #prev {
  position: absolute;
  top: 0;
  width: auto;
  line-height: 100vh;
  z-index: 999;
  font-size: 90px;
  color: #fff;
  padding: 0 20px
}

#next { right: 0 }

5. Initialize the plugin and done.

$(".sldier").mustang();

6. Default customization options.

item: '.item',
time: 2500,
buttonActive: false,
next: '#next',
prev: '#prev'

---

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