Minimal CSS3 Animated Carousel Plugin With jQuery - Mustang.js
File Size: | 23.6 KB |
---|---|
Views Total: | 925 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.