Minimal Mobile-fist jQuery Carousel Plugin - Touch Carousel

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.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script/carousel.js"></script>

2. Add your custom content e.g. images to the carousel.

<div class="slideBox">
  <ul class="slideUl">
    <li class="list"><img src="1.jpg"></li>
    <li class="list"><img src="2.jpg"></li>
    <li class="list"><img src="3.jpg"></li>
    <li class="list"><img src="4.jpg"></li>
    <li class="list"><img src="5.jpg"></li>
  </ul>
</div>

3. The primary CSS styles for the carousel.

.slideBox {
  position: relative;
  width: 100%;
  padding-top: 46.666%;
  overflow: hidden;
}

.slideUl, .list, .list a img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

4. Style the bottom dots pagination.

.point {
  position: absolute;
  z-index: 22;
  bottom: 10px;
  left: 50%;
  font-size: 0px;
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
}

.point span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0px 2px;
  border: 1px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
}

.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.