Mobile-first Image/Content Slider Plugin For jQuery - swipeSlide

swipeSlide is a jQuery / Zepto plugin designed for mobile website that allows you to cycle through a list of html content with touch events on mobile devices.

More examples:

• Fullscreen slider
• With tab bar navigation

Basic usage:

1. Load the jQuery swipeSlide plugin after jQuery or Zepto library.

<script src="js/zepto.min.js"></script>
<!-- <script src="js/jquery.min.js"></script> -->
<script src="js/swipeSlide.min.js"></script>

2. Create a list of images for the slider.

<div class="slide" id="demo">
  <ul>
    <li>
      <a href="#">
        <img src="1.jpg" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="2.jpg" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="3.jpg" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="4.jpg" alt="">
      </a>
    </li>
  </ul>
</div>

3. The required CSS styles for the image slider.

.slide {
  position: relative;
  max-width: 640px;
  overflow: hidden;
  margin: 20px auto;
}

.slide:after {
  content: '';
  display: block;
  width: 100%;
  padding-top: 50%;
}

.slide ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.slide li {
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.slide li:first-child { z-index: 1; }

.slide li img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.slide .dot {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  font-size: 0;
}

.slide .dot span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.slide .dot .cur { background-color: #fff; }

4. Call the plugin on the parent container element.

$('#demo').swipeSlide();

5. Call the plugin on the parent container element.

$('#demo').swipeSlide({

// parent DOM element
ul : me.$el.children('ul'), 

// child DOM element
li : me.$el.children().children('li'), 

// initial slide
index : 0,  

// endless loop
continuousScroll : false,

// autoplay
autoSwipe : true,

// animation speed
speed : 4000,

// x-axis
axisX : true,

// transition type
transitionType : 'ease',

// lazy load images
lazyLoad : false, 

// callback function
callback : function(){} 

});

Change logs:

2016-09-09

• v3.4.4

2015-10-01

• fixed a bug where index = 0

2015-09-02

• fixed lazy load bug.

2015-08-20

• fixed callback bug.

---

This awesome jQuery plugin is developed by ximan. For more Advanced Usages, please check the demo page or visit the official website.