Basic jQuery Image Slideshow Plugin with Auto Play - btSlider
File Size: | 302 KB |
---|---|
Views Total: | 3437 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
btSlider is a really simple jQuery plugin that provides an easiest way to create an auto-play image slider/slideshow with fade in/out effects.
Basic Usage:
1. Load the latest version of jQuery library and jQuer btSlider plugin in the Html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jQuery.btSlider.js"></script>
2. Create an image slideshow with pagination and prev/next controls.
<div id="my-gallery" class="slideShow"> <ul class="items"> <li><img src="img/pic1.jpg"></li> <li><img src="img/pic2.jpg"></li> <li><img src="img/pic3.jpg"></li> <li><img src="img/pic4.jpg"></li> <li><img src="img/pic5.jpg"></li> </ul> <ul class="pagination"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="preNext pre"></div> <div class="preNext next"></div> </div>
3. Initialize the slideshow and set the interval between each slide.
<script type="text/javascript"> $(function(){ $('#my-gallery').btSlider({ 'interval':4000 }); }); </script>
4. Style the image slideshow via CSS.
.slideShow { width: 100%; overflow: hidden; position: relative; } .items { width: 500px; height: 340px; overflow: hidden; position: relative; list-style: none outside none; padding: 0; margin: 0; } .items li { position: absolute; top: 0px; left: 0px; display: none; } .items li:first-child { display: block; } .items li img { width: 500px; height: 340px; } .pagination { float: right; list-style: none; margin: 0 10px; position: relative; bottom: 25px; } .pagination li { text-align: center; color: #fff; float: left; width: 20px; height: 20px; line-height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #000; border-radius: 20px; } .pagination li:hover { background: #C20305; } .pagination li.active { background: #C20305; } .preNext { width: 45px; height: 100px; position: absolute; top: 90px; background: url(../img/sprite.png) no-repeat 0 0; cursor: pointer; } .pre { left: 0; } .next { right: 0; background-position: right top; }
This awesome jQuery plugin is developed by Hiufan. For more Advanced Usages, please check the demo page or visit the official website.