Responsive Mobile Friendly Slider jQuery Plugin - Bway Image Slider
File Size: | 335 KB |
---|---|
Views Total: | 1266 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Bway Image Slider is a simple, easy-to-use jQuery plugin for creating a responsive, touch-compatible image slider for both desktop and mobile websites.
Features:
- Auto adjusts the number of images to show based on the screen size.
- Supports touch events based on Hammer.js.
- Supports both vertical and horizontal layouts.
- Supports infinite / carousel mode.
How to use it:
1. Include the necessary jQuery library and jQuery Bway Image Slider plugin's script on your html document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.bway.imageslider.js"></script>
2. Include the OPTIONAL hammer.js and jQuery hammer.js for touch events support.
<script src="/path/to/hammer.min.js"></script> <script src="/path/to/jquery.hammer.js"></script>
3. Add your images together with the prev / next navigation buttons to your webpage.
<div id="example"> <div class="viewport"> <input type="button" class="buttons prev" value=""> <div class="overview"> <ul> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="4.jpg"></li> <li><img src="5.jpg"></li> <li><img src="6.jpg"></li> <li><img src="7.jpg"></li> <li><img src="8.jpg"></li> <li><img src="9.jpg"></li> </ul> </div> <input type="button" class="buttons next" value=""> </div> </div>
4. Initialize the image slider.
$('#example').bwayImageSlider();
5. Apply your own CSS styles to the image slider.
#example1 { padding: 0; position: relative; overflow: hidden; } #example1 .viewport { position: relative; width: 100%; height: 150px; /* you can define the height you want */ overflow: hidden; } #example1 .buttons { display: block; position: absolute; line-height: 150px; /* in this case we use some height of viewport */ width: 30px; top: 0; text-align: center; z-index: 1; background-color: #FFF; border: 0; font-family: 'fontawesome'; } #example1 .buttons i { font-size: 18px; color: #000; line-height: 150px; } #example1 .buttons:hover { background-color: #F3F3F3; } #example1 .overview { position: absolute; padding: 0 35px; margin: 0; left: 0; top: 0; } #example1 .overview ul { clear: both; list-style: none; height: 150px; padding: 0; } #example1 li { display: inline-block; float: left; margin: 0 7px; } #example1 .buttons.prev { left: 0; /* if you're using 'x' axis */ } #example1 .buttons.next { right: 0; /* if you're using 'x' axis */ }
6. Configuration options.
$('#example').bwayImageSlider({ // x = horizontal // y = vertical axis : 'x', // intial slide initialCourse : 0, // animation speed speed : 1500, // space between images itemMargin : 10, // carousel mode loop : false, // enable loader loader : false, // enable keyboard navigation keyboard : false, });
Change log:
2016-05-16
- v1.0.6: Loader controlable. Since you have .loader-overlay in your container just use loader : true.
2016-03-21
- v1.0.5: bug correction
2016-03-16
- v1.0.3: includes current/total information
2016-01-06
- v1.0.2 Allows <a> or <img> as list elements
This awesome jQuery plugin is developed by bway-dev. For more Advanced Usages, please check the demo page or visit the official website.