Tiny Fast Image Slider/Carousel Plugin For jQuery - xSlider
File Size: | 80.5 KB |
---|---|
Views Total: | 2660 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
xSlider is a simple, lightweight, blazing-fast jQuery plugin used to create a pretty nice, easy-to-style carousel slider from a normal image list.
How to use it:
1. Insert your image list into the carousel container like this:
<div class="slider"> <div class="slider-img"> <ul class="slider-img-ul"> <li><img src="images/slider-5.jpg"></li> <li><img src="images/slider-1.jpg"></li> <li><img src="images/slider-2.jpg"></li> <li><img src="images/slider-3.jpg"></li> <li><img src="images/slider-4.jpg"></li> <li><img src="images/slider-5.jpg"></li> <li><img src="images/slider-1.jpg"></li> </ul> </div> </div>
2. Insert jQuery library and the jQuery xSlider plugin's script right before the closing body tag.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="xSlider.js"></script>
3. The example CSS to style the carousel slider.
.slider { width: 1200px; margin: 0 auto; position: relative } .slider:hover .slider-btn { color: #fff; text-shadow: 0 0 5px #666 } .slider .slider-img { width: 12000px; position: relative } .slider .slider-img .slider-img-ul { position: absolute; left: 0; top: 0; overflow: hidden } .slider .slider-img .slider-img-ul li { float: left } .slider .slider-img .slider-img-ul li img { width: 1200px; height: 460px }
4. The CSS styles for the navigation arrows & pagination bullets.
.slider .slider-dot ul { position: absolute; right: 50px; bottom: 30px } .slider .slider-dot ul li { cursor: pointer; width: 10px; height: 10px; border-radius: 50%; background: #ccc; border: 2px solid #fff; float: left; margin-left: 10px } .slider .slider-dot ul li.active, .slider .slider-dot ul li:hover { background: #fff } .slider .slider-btn { position: absolute; width: 50px; height: 100px; top: 50%; line-height: 100px; text-align: center; color: #fff; font-size: 28px; text-decoration: none; color: rgba(255,255,255,0) } .slider .slider-btn:hover { background: rgba(125,125,125,.3) } .slider .slider-btn.slider-btn-left { left: 0; margin-top: -50px } .slider .slider-btn.slider-btn-right { right: 0; margin-top: -50px }
5. Config the carousel slider with the following options.
$('.slider').xSlider({ // slider width w: 1200, // current slide current: 0, // animation speed speed: 500, // autoplay interval intervalTime: 5000 })
This awesome jQuery plugin is developed by codexu. For more Advanced Usages, please check the demo page or visit the official website.