Simple Mobile-first jQuery Image Slider Plugin - zSlider

zSlider is a simple, lightweight jQuery image slider plugin optimized for mobile webpage that allows the user to slide between images via swipe events.

How to use it:

1. Add jQuery library and the jQuery zSlider plugin's script into the webpage.

<script src="//code.jquery.com/jquery-3.0.0.slim.min.js"></script>
<script src="js/main.js"></script>

2. Add your images to the slider as follows:

<div id="slider-container">
  <div class="slides">
    <div class="slide">
      <img src="a.jpg">
    </div>
    <div class="slide">
      <img src="b.jpg">
    </div>
    <div class="slide">
      <img src="c.jpg">
    </div>
    <div class="slide">
      <img src="d.jpg">
    </div>
  </div>
  <div class="slider-control">
    <div class="move-left">

    </div>
    <div class="move-right">

    </div>
  </div>
</div>

3. The primary CSS styles for the slider.

#slider-container, .slider-control {
  overflow: hidden;
  height: 220px;
  width: 350px;
  margin: auto;
  border-radius: 6px;
}

.slider-control {
  white-space: nowrap;
  letter-spacing: 0;
  font-size: 0;
  margin-top: -220px;
}

.move-left, .move-right {
  height: 350px;
  width: 220px;
}

.slides {
  white-space: nowrap;
  letter-spacing: 0;
  font-size: 0;
  transition: margin .3s
}

.item-moving { transition: none; }

.slide, .move-left, .move-right { display: inline-block; }

.slide img {
  height: 220px;
  width: 350px;
}

4. Override the default options.

'slidesContainer' : 'slides',
'cSlide' : 'slide',
'sliderControls' : 'slider-control',
'prevArrow' : 'move-left',
'imageWidth' : 350,
'nextArrow' : 'move-right'

---

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