Smooth Mobile-Friendly Slider Plugin With jQuery And CSS3 - swipeslider

swipeslider is a responsive, touch-friendly jQuery content slider / carousel plugin that uses CSS3 transitions and transforms for smooth sliding animations.

Main features:

• Easy to implement.
• Highly customizable.
• Fully responsive.
• Infinite looping.
• Supports both mouse drag and touch swipe events.
• Supports any html content, not only images.
• Autoplay and pause on hover.

How to use it:

1. Load the required swipeslider.css in the head section of the document.

<link href="swipeslider.css" rel="stylesheet">

2. Create a list of any html content you want to present and then wrap the list into a wrapping element with the CSS class 'swipeSlider'.

<div id="demo" class="swipeslider">
  <ul class="sw-slides">
    <li class="sw-slide">
      Slide 1 Content
    </li>
    <li class="sw-slide">
      Slide 2 Content
    </li>
    <li class="sw-slide">
      Slide 3 Content
    </li>
    <li class="sw-slide">
      Slide 4 Content
    </li>
  </ul>
</div>

3. Load the latest JQuery library and the swipeslider.js before we close the body tag.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="swipeslider.js"></script>

4. Call the function on the wrapping element to generate a basic slider.

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

5. Config the slider with the following options.

$('#demo').swipeslider({

  /**
  / How long one slide will change the other.
  */
  transitionDuration: 500,

  /**
  / Enable autoplay
  */
  autoPlay: true,

  /**
  * How frequently slides will be changed.
  */
  autoPlayTimeout: 3000,

  /**
  * Transition effect.
  */
  timingFunction: 'ease-out',

  /**
  * Show 'Next' and 'Previous' buttons.
  */
  prevNextButtons: true,

  /**
  * Show slide switches.
  */
  bullets: true,

  /**
  * Enable swipe function.
  */
  swipe: true,

  /**
  * Overall height of the slider. Set it to percent to make it responsive.
  * Otherwise the slider will keep the height.
  */
  sliderHeight: '60%'

});

Change log:

2016-06-12

• Fix: fixed class-name with typo.

2016-05-04

• Responsiveness fix.

---

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