Basic Touch Slider Plugin With jQuery - swipeSlider

swipeSlider is a very basic touch swiper/slider plugin for jQuery that enables the users to slide through images (or any other elements) via mouse drag and touch swipe.

How to use it:

1. The basic HTML markup structure for the slider. You're allowed to embed any html content to the slides as follow:

<div id="slider">
  <div>
    <div class="slide-1">
      Slide 1
    </div>
    <div class="slide-2">
      Slide 2
    </div>
    <div class="slide-3">
      Slide 3
    </div>
    ...
  </div>
</div>

2. The basic CSS styles:

.ss-slider {
  height: 100%;
  overflow: hidden;
}

.ss-slider > .ss-slides {
  height: 100%;
  overflow: hidden;
  user-select: none;
  width: 100%;
}

.ss-slider > .ss-slides > .ss-slide {
  float: left;
  height: 100%;
  overflow: hidden;
  position: relative;
}

3. Link to the latest version of jQuery library and the jQuery swipeSlider plugin.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.swipeSlider.js"></script>

4. Enable the touch slider with default options.

var slider = $('#slider').swipeSlider();

5. If you'd like to create custom controls to slide through the slides manually.

<a href="#" class="previous">Previous</a>
<a href="#" class="next">Next</a>

$('.next').on('click', function() {
  slider.swipeSlider('slideNext');
});

$('.previous').on('click', function() {
  slider.swipeSlider('slidePrevious');
});

6. All default configuration options and callback functions.

var slider = $('#slider').swipeSlider({
    animationDuration: 300,
    autoReverse: false,
    autoTransitionDuration: false,
    bounce: true,
    drag: true,
    infinite: false,
    onSlideStartCallback: undefined,
    onSlideCompleteCallback: undefined,
    onMoveCallback: undefined,
    onStartCallback: undefined,
    startIndex: 0
});

---

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