Basic Smooth Image Slider With jQuery And Velocity.js - xSlider
File Size: | 15.1 KB |
---|---|
Views Total: | 2975 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
xSlider is a simple yet customizable image slider / carousel plugin that uses Velocity.js library for fast smooth sliding animations.
How to use it:
1. Create a list of images and the wrap them into a slider wrapping element as follows.
<div class="slider-warp"> <div> <ul> <li> <img src="1.jpg"> </li> <li> <img src="2.jpg"> </li> <li> <img src="3.jpg"> </li> </ul> </div> </div>
2. Include jQuery library, Velocity.js and the jQuery xSlider plugin's script at the bottom of the webpage.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/velocity.min.js"></script> <script src="src/xSlider.js"></script>
3. Initialize the image slider.
$('.slider-warp').xSlider();
4. Style the image slider. Note that the wrapping element must have a fixed height.
.slider-warp { width: 500px; height: 281px; position: relative; overflow: hidden; } .slider-warp ul { padding: 0px; margin: 0px; position: absolute; } .slider-warp li { list-style: none; } .slider-warp li img { display: block; width: 100%; margin: 0px; padding: 0px; } .xslider-nav { position: absolute; z-index: 2; bottom: 2px; text-align: center; width: 100%; margin: 5px 0px; } .xslider-nav span { display: inline-block; width: 0px; height: 0px; margin: 0 4px; padding: 3px; background: transparent; border-radius: 5px; border: 2px solid white; cursor: pointer; opacity: 0.7; } .xslider-nav span.active { background: white; } .xslider-arrow { top: 50%; position: absolute; width: 100%; } .xslider-arrow span { display: block; width: 32px; height: 32px; right: 15px; position: absolute; margin-top: -16px; overflow: hidden; background: rgba(0,0,0,.2) no-repeat 50% 50%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg=='); background-size: 7px 11px; border-radius: 32px; text-indent: -999em; opacity: .6; transition: opacity .2s; cursor: pointer; } .xslider-arrow .prev { left: 15px; transform: rotate(-180deg); } .xslider-nav p { display: block; border: 1px solid white; width: 60px; right: 0px; position: absolute; margin: 5px; padding: 2px; bottom: 0px; color: white; }
5. Config the image slider with the following options.
$('.slider-warp').xSlider({ autoplay: true, interval: 3000, speed: 400, nav: true, page: false, scrollNum: 1, direction: 'ltr', //ltr rtl controls: true, hover: false, refresh: true });
This awesome jQuery plugin is developed by ShangXinbo. For more Advanced Usages, please check the demo page or visit the official website.