Merge pull request nolimits4web#870 from OxyDesign/master

Allow instantiation on every jQuery object and methods chaining
jetoune · Aug 17, 2014 · 84a5768 · 84a5768
2 parents 558e81d + beb3bac
commit 84a5768
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 6 deletions.
diff --git a/demos/19-chaining.html b/demos/19-chaining.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Demo</title>
+  <link rel="stylesheet" href="css/idangerous.swiper.css">
+  <style>
+/* Demo Syles */
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.device {
+  width: 640px;
+  height: 300px;
+  padding: 30px 40px;
+  border-radius: 20px;
+  background: #111;
+  border: 3px solid white;
+  margin: 5px auto;
+  position: relative;
+  box-shadow: 0px 0px 5px #000;
+}
+.device .arrow-left {
+  background: url(img/arrows.png) no-repeat left top;
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  margin-top: -15px;
+  width: 17px;
+  height: 30px;
+}
+.device .arrow-right {
+  background: url(img/arrows.png) no-repeat left bottom;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  margin-top: -15px;
+  width: 17px;
+  height: 30px;
+}
+.swiper-container {
+  height: 300px;
+  width: 640px;
+}
+.content-slide {
+  padding: 20px;
+  color: #fff;
+}
+.title {
+  font-size: 25px;
+  margin-bottom: 10px;
+}
+.pagination {
+  position: absolute;
+  left: 0;
+  text-align: center;
+  bottom:5px;
+  width: 100%;
+}
+.swiper-pagination-switch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background: #999;
+  box-shadow: 0px 1px 2px #555 inset;
+  margin: 0 3px;
+  cursor: pointer;
+}
+.swiper-active-switch {
+  background: #fff;
+}
+  </style>
+</head>
+<body>
+  <div class="device">
+    <a class="arrow-left" href="#"></a>
+    <a class="arrow-right" href="#"></a>
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
+        <div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
+        <div class="swiper-slide">
+          <div class="content-slide">
+            <p class="title">Slide with HTML</p>
+            <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination"></div>
+  </div>
+  <div class="device">
+    <a class="arrow-left" href="#"></a>
+    <a class="arrow-right" href="#"></a>
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
+        <div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
+        <div class="swiper-slide">
+          <div class="content-slide">
+            <p class="title">Slide with HTML</p>
+            <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination"></div>
+  </div>
+  <script src="js/jquery-1.10.1.min.js"></script>
+  <script src="../src/idangerous.swiper.js"></script>
+  <script>
+  var mySwiper = $('.swiper-container').swiper({
+    pagination: '.pagination',
+    loop:true,
+    grabCursor: true,
+    paginationClickable: true
+  });
+  $('.arrow-left').on('click', function(e){
+    e.preventDefault()
+    var swiper = $(this).siblings('.swiper-container').data('swiper');
+    swiper.swipePrev();
+  });
+  $('.arrow-right').on('click', function(e){
+    e.preventDefault()
+    var swiper = $(this).siblings('.swiper-container').data('swiper');
+    swiper.swipeNext();
+  });
+  </script>
+</body>
+</html>
diff --git a/src/idangerous.swiper.js b/src/idangerous.swiper.js
@@ -568,7 +568,7 @@ var Swiper = function (selector, params) {
         var _width = _this.h.getWidth(_this.container, false, params.roundLengths);
         var _height = _this.h.getHeight(_this.container, false, params.roundLengths);
         if (_width === _this.width && _height === _this.height && !force) return;
-        
+
         _this.width = _width;
         _this.height = _height;
 
@@ -675,7 +675,7 @@ var Swiper = function (selector, params) {
                                 _this.snapGrid.push(slideLeft);
                             }
                         }
-                            
+
                     }
                     else {
                         _this.snapGrid.push(slideLeft);
@@ -1910,7 +1910,7 @@ var Swiper = function (selector, params) {
                     else {
                         _this.fireCallback(params.onSlideChangeEnd, _this, direction);
                     }
-                    
+
                 }
                 _this.setWrapperTranslate(newPosition);
                 _this._DOMAnimating = false;
@@ -2809,9 +2809,16 @@ if (window.jQuery || window.Zepto) {
     (function ($) {
         'use strict';
         $.fn.swiper = function (params) {
-            var s = new Swiper($(this)[0], params);
-            $(this).data('swiper', s);
-            return s;
+            var firstInstance;
+            this.each(function(i) {
+                var that = $(this);
+                if (!that.data('swiper')) {
+                    var s = new Swiper(that[0], params);
+                    if (!i) firstInstance = s;
+                    that.data('swiper', s);
+                }
+            });
+            return firstInstance;
         };
     })(window.jQuery || window.Zepto);
 }