Easy Mobile-friendly Swiper Plugin - jQuery Slide.js
File Size: | 9.77 KB |
---|---|
Views Total: | 2115 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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"><</a> <a href="javascript:" class="slide_nav slide_next">></a> </div>
This awesome jQuery plugin is developed by waquer. For more Advanced Usages, please check the demo page or visit the official website.