Easy Mobile-friendly Swiper Plugin - jQuery Slide.js

An easy, high-performance, touch-enabled, SEO-friendly, jQuery based swiper/slider/carousel with pagination bullets and navigation arrows (desktop only).

In the mobile mode, your users can switch between slides with mouse drag or touch swipe events.

How to use it:

1. Load the necessary JavaScript and Stylesheet in your document.

<link rel="stylesheet" href="/path/to/style.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/script.js"></script>

2. Initialize the swiper and we're ready to go.

$(function(){
  $(".slider").init_slider();
});

3. The HTML structure to create a mobile swiper.

<div class="slider" style="height:100vh;">
  <ul class="viewport">
    <li class="sitem" style="background:#e25353"></li>
    <li class="sitem" style="background:#ffe96c"></li>
    <li class="sitem" style="background:#77f582"></li>
    <li class="sitem" style="background:#4bf5f5"></li>
    <li class="sitem" style="background:#7c5fff"></li>
  </ul>
</div>

4. The HTML structure to create a swiper (with navigation controls) for the desktop.

<div class="slide_box">
  <ul class="slide_pic">
    <li style="background:#e25353"></li>
    <li style="background:#ffe96c"></li>
    <li style="background:#77f582"></li>
    <li style="background:#4bf5f5"></li>
    <li style="background:#7c5fff"></li>
  </ul>
  <ul class="slide_tab"></ul>
  <a href="javascript:" class="slide_nav slide_prev">&lt;</a>
  <a href="javascript:" class="slide_nav slide_next">&gt;</a>
</div>

---

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