Tiny jQuery Content Carousel / Slider Plugin - jSlider
File Size: | 6.46 KB |
---|---|
Views Total: | 1433 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery based content carousel / slider where you're able to navigate between slides by clicking on the navigation arrows or hovering the pagination dots.
How to use it:
1. The essential html structure for the slider.
<div class="mySlider"> <div class="slide-wrapper"> <div class="slide" style="background:#111;"></div> <div class="slide" style="background:#999;"></div> <div class="slide" style="background:#ddd;"></div> </div> <div class="slide-prev"></div> <div class="slide-next"></div> <div class="pagination"> <span></span> <span></span> <span></span> </div> </div>
2. Load the necessary JavaScript files at the end of the html document.
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="jslider.jquery.js"></script>
3. Initialize the slider.
var jSlider = new JSlider('.mySlider',{ nextButton: '.slide-next', prevButton: '.slide-prev', pagination: '.pagination' });
4. Apply your own CSS styles to the slider and it's controls.
.mySlider { position: relative; width: 640px; height: 360px; margin: auto; font-size: 0; overflow: hidden; } .slide-wrapper { position: relative; height: 100%; } .slide { width: 640px; height: 100%; display: inline-block; } .slide-prev, .slide-next { position: absolute; top: 50%; width: 17px; height: 30px; z-index: 999; margin-top: -15px; cursor: pointer; } .slide-prev { background: url(imgs/arrows.png) no-repeat left top; left: 10px; background-color: rgba(0,0,0,.5); } .slide-next { background: url(imgs/arrows.png) no-repeat left bottom; right: 10px; background-color: rgba(0,0,0,.5); } .pagination { position: absolute; bottom: 10px; width: 100%; text-align: center; } .pagination span { width: 7px; height: 7px; border: 1px solid #fff; display: inline-block; margin: 0 3px; border-radius: 7px; cursor: pointer; } .pagination span.pagination-active { background: #fff; }
This awesome jQuery plugin is developed by JoJoChilly. For more Advanced Usages, please check the demo page or visit the official website.