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: MIT
   

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.7.0 (2014-09-01)

  • New API parameters "swipeToNext", "swipeToPrev" to enable/disable one-direction swipes
  • "cssWidthAndHeight" parameter could also accept "width" or "height" strings
  • Better support for form elements on touch devices
  • Lot of minor fixes

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