Responsive and Flexible Mobile Touch Slider - Swiper

Responsive and Flexible Mobile Touch Slider - Swiper
File Size: 2.7 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

Swiper is a javascript library for implement Responsive and Flexible Mobile Touch Sliders on your mobile websites and Apps. It also comes with 2 plugins: 3D Flow (App Store like 3D slider plugin that turns your great swiper slider (or app) into amazing realistic 3D gallery with dynamic shadows.) and Scrollbar (Add fully customizable eye-catching scrollbars to your Swiper slider (or app)). Please take a look at the demo page to see it in action.

Features:

  • Responsive design
  • Small and fast
  • Supports any html elements, not only images
  • Supports Vertical/Horizontal animations and swipes
  • Works on iOS, Android and latest Desktop browsers

Basic Usage:

1. Include jQuery library and  Swiper.js on your webpage

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script  src="js/idangerous.swiper-1.9.1.min.js"></script>

2. Include required swiper.js on the page

<link rel="stylesheet" href="css/idangerous.swiper.css">

3. Create the html

<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the first slide goes here -->
      </div>
      
      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the second slide goes here -->
      </div>
      
      <!--Third Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the third slide goes here -->
      </div>
      <!--Etc..-->
  </div>
</div>

4. Call the plugin with options

<script type="text/javascript">

$(function(){
var mySwiper = $('.swiper-container').swiper({

mode:'horizontal',
loop: true

});
})

</script>

Change log:

v2.4.3 (2014-01-29)

  • Fix loop and autoplay bug

For more Advanced Usages, please check the demo page or visit the official website.