Easy Responsive Slider Plugin With jQuery And CSS3 - photoSlider
File Size: | 45.4 KB |
---|---|
Views Total: | 1490 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
photoSlider is a jQuery slider plugin designed for showcasing your photos with different sizes in a responsive, auto-rotating, infinite-looping carousel interface.
How to use it:
1. Link to jQuery library together with the jQuery photoSlider plugin's stylesheet photoslider.css
and JavaScript photoslider.js
.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <!-- jQuery photoslider --> <link rel="stylesheet" href="photoslider.css"> <script src="photoslider.js"></script>
2. Insert your favorite photos into the slider and then specify the width & height for each slide using HTML5 data
attributes as this:
<div class="photoslider"> <div class="photoslider__item" data-width="500" data-height="500"> <img src="1.png"> <div class="photoslider__item__description">Caption 1</div> </div> <div class="photoslider__item" data-width="300" data-height="500"> <img src="2.png"> <div class="photoslider__item__description">Caption 2</div> </div> <div class="photoslider__item" data-width="750" data-height="500"> <img src="3.png"> <div class="photoslider__item__description">Caption 3</div> </div> </div>
3. The JavaScript to active the slider with default options.
$('.photoslider').photoslider();
4. Config the plugin by passing the following options as an object to the photoslider()
method:
$('.photoslider').photoslider({ // enable/disable autoplay 'autoplay': true, // animation duration 'duration': 3000, // animation speed 'speed': 400, // resize slider on window resize 'resize': true, // prefix 'prefix': 'photoslider', // enable / disable navigation controls 'navigation': true, 'navigationPrev': true, 'navigationNext': true, // prev / next text 'prevText': 'PREV', 'nextText': 'NEXT' });
This awesome jQuery plugin is developed by bdiekert. For more Advanced Usages, please check the demo page or visit the official website.