This time I will share jQuery Plugin and tutorial about Minimal Mobile-fist jQuery Carousel Plugin – Touch Carousel, hope it will help you in programming stack.
Touch Carousel is a very small jQuery / Zepto plugin which helps you create responsive, automatic, touch-enabled and seamless scrolling carousel component for your mobile web pages or applications.
How to use it:
1. Include jQuery (or Zepto.js) library and the jQuery Touch Carousel plugin’s script on the html page.
carousel.js
: Normal mode.
carousel_2.js
: Infinite looping.
1 |
< script src = "//code.jquery.com/jquery-1.11.3.min.js" ></ script > |
2 |
< script src = "script/carousel.js" ></ script > |
2. Add your custom content e.g. images to the carousel.
3 |
< li class = "list" >< img src = "1.jpg" ></ li > |
4 |
< li class = "list" >< img src = "2.jpg" ></ li > |
5 |
< li class = "list" >< img src = "3.jpg" ></ li > |
6 |
< li class = "list" >< img src = "4.jpg" ></ li > |
7 |
< li class = "list" >< img src = "5.jpg" ></ li > |
3. The primary CSS styles for the carousel.
08 |
.slideUl, .list, .list a img { |
4. Style the bottom dots pagination.
07 |
transform: translate 3 d( -50% , 0 , 0 ); |
08 |
-webkit-transform: translate 3 d( -50% , 0 , 0 ); |
12 |
display : inline- block ; |
16 |
border : 1px solid #fff ; |
17 |
-webkit-border-radius: 50% ; |
22 |
.point span.current { background-color : #fff ; } |
5. That’s it.
This awesome jQuery plugin is developed by yansuran. For more Advanced Usages, please check the demo page or visit the official website.