Animated Touch-friendly Slider With jQuery And CSS3 - Touch Slider
File Size: | 908 KB |
---|---|
Views Total: | 14553 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A fully responsive, mobile-friendly, cross-platform jQuery slider carousel plugin that features CSS3 animations, custom breakpoints, thumbnail preview on hover and more.
Basic usage:
1. Download the plugin and insert the JavaScript file slider.min.js
after jQuery library.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/slider.min.js"></script>
2. Include the hammer.js library that helps you add support for touch gestures to the slider.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/slider.min.js"></script>
3. Add your own content and images as backgrounds to the slider.
<div class="o-sliderContainer" id="pbSliderWrap0" style="margin-top:0;"> <div class="o-slider" id="pbSlider0"> <div class="o-slider--item" style="background-image: url(1.jpg)"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph">This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> <div class="o-slider--item" style="background-image: url(2.jpg)"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph">This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> <div class="o-slider--item" style="background-image: url(3.jpg)"> <div class="o-slider-textWrap"> <h1 class="o-slider-title">This is a title</h1> <span class="a-divider"></span> <h2 class="o-slider-subTitle">This is a sub title</h2> <span class="a-divider"></span> <p class="o-slider-paragraph">This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p> </div> </div> ... </div> </div>
4. Initialize the slider plugin with default options.
$('#pbSlider0').pbTouchSlider();
5. Customize the slider plugin by overriding the default options as shown below:
$('#pbSlider0').pbTouchSlider({ // Assign a unique ID to the div.o-sliderContainer slider_Wrap : '', // Single Item slider_Item : '.o-slider--item', // Single Item width in percentage % slider_Item_Width : 90, // To dragIt or not to dragIt slider_Drag : true, // Wanna see dots or not? slider_Dots : { class :'.o-slider-pagination', enabled : true, preview : true, }, // Wanna see Arrows or not? slider_Arrows : { class :'.o-slider-arrows', enabled : true }, // Percentage of dragX before go to next/prev slider slider_Threshold : 25, // Animation speed slider_Speed : 1000, // see http://cubic-bezier.com/ slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)', // Kind of media queries ( can add more if you know how to do it :D and if you need ) slider_Breakpoints : { default : { height : 500 // height on desktop }, tablet : { height : 400, // height on tablet media : 1024 // tablet breakpoint }, smartphone : { height : 300, // height on smartphone media : 768 // smartphone breakpoint } } }};
Change log:
2017-11-28
- fullwidth & height add
2017-11-24
- JS & CSS fix
2017-10-24
- JS & CSS fix
2017-08-25
- html fix
2017-07-17
- css fix
2017-06-29
- added preview support
2017-06-05
- Fixed for IE9
This awesome jQuery plugin is developed by pirolab. For more Advanced Usages, please check the demo page or visit the official website.