From 5cb3e7ef29eacc71f56b77e23307f373014eafca Mon Sep 17 00:00:00 2001 From: WilliamLin Date: Mon, 14 Dec 2015 12:51:24 -0500 Subject: [PATCH] add navContainer --- README.md | 8 ++++++- changelog.md | 2 +- demo/index.html | 50 ++++++++++++++++++++++++++++----------- src/js/tiny-slider.js | 40 ++++++++++++++++++------------- src/js/tiny-slider.min.js | 2 +- 5 files changed, 69 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 4e035196..e7e0dca2 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ options = { slideByPage: false, nav: true, navText: ['prev', 'next'], + navContainer: false, dots: true, dotsContainer: false, arrowKeys: false, @@ -117,7 +118,11 @@ tinySlider({
- + +
+
+
+
@@ -130,6 +135,7 @@ tinySlider({ tinySlider({ container: document.querySelector('.slider'), items: 3, + navContainer: document.querySelector('.slider-nav'), dotsContainer: document.querySelector('.thumbnails') }); ``` diff --git a/changelog.md b/changelog.md index 8ff0dcdc..633e214b 100644 --- a/changelog.md +++ b/changelog.md @@ -1,7 +1,7 @@ #Changelog #### v0.2.0 -+ Added: `dotsContainer`, now you can use customized dots (e.g. thumbnails). ++ Added: `navContainer` and `dotsContainer`, now you can use customized nav and dots. + Improved: now the transition speed is based on how far it's translated. + Fixed: an position issue while `sliderByPage` is turned on, if the last dot is clicked and followed by a `next` button clicking. diff --git a/demo/index.html b/demo/index.html index 42e626f7..c03ab550 100644 --- a/demo/index.html +++ b/demo/index.html @@ -47,6 +47,7 @@ .img-6 { background: #D65B5B; background: hsl(0, 60%, 60%); } .img-7 { background: #D6995B; background: hsl(30, 60%, 60%); } .img-8 { background: #705BD6; background: hsl(250, 60%, 60%); } + .controls { position: relative; } .thumbnails { margin: 20px 0; text-align: center; @@ -55,6 +56,20 @@ .thumbnails li.tiny-active { background: none; } .thumbnails li img { border: 5px solid #fff; } .thumbnails li.tiny-active img { border-color: #E75FCB; } + .slider-nav { text-align: center; } + .slider-nav li { + display: block; + position: absolute; + top: 50%; + margin-top: -25px; + font-size: 30px; + padding: 5px 10px; + cursor: pointer; + transition: background 0.3s; + } + .slider-nav li:nth-child(1) { left: 0; } + .slider-nav li:nth-child(2) { right: 0; } + .slider-nav li:hover { background: #f2f2f2; } .tiny-nav { text-align: center; } .tiny-prev, .tiny-next { display: inline-block; @@ -179,8 +194,8 @@

fixed width

-

Customize dots

-
    +

    Customize

    +

    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sed harum quaerat dicta cum tempora modi assumenda porro perferendis. Alias.

      @@ -214,18 +229,24 @@

      Customize dots

      Laborum officiis, magnam, eos possimus aliquam reiciendis odit alias nulla odio, ipsa expedita, placeat neque repellendus architecto ut quam consequuntur.

    -
      -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
    +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    +
      +
    • 〈
      • +
    • 〉
      • +
    + 
    
-var customizedots = document.querySelector('.customize-dots');
+var customizedots = document.querySelector('.customize');
 
 tinySlider({
   container: customizedots,
@@ -431,7 +452,7 @@ 
    arrow keys
    
       nonLoop = d.querySelector('.non-loop'),
       slideByPage = d.querySelector('.slide-by-page'),
       autoplay = d.querySelector('.autoplay'),
-      customizedots = d.querySelector('.customize-dots'),
+      customizedots = d.querySelector('.customize'),
       arrowKeys = d.querySelector('.arrow-keys');
 
   tinySlider({
@@ -451,6 +472,7 @@ 
    arrow keys
    
   tinySlider({
     container: customizedots,
     items: 3,
+    navContainer: document.querySelector('.slider-nav'),
     dotsContainer: document.querySelector('.thumbnails')
   });
 
diff --git a/src/js/tiny-slider.js b/src/js/tiny-slider.js
index 8176a3b5..87556cd8 100644
--- a/src/js/tiny-slider.js
+++ b/src/js/tiny-slider.js
@@ -157,6 +157,7 @@
       slideByPage: false,
       nav: true,
       navText: ['prev', 'next'],
+      navContainer: false,
       dots: true,
       dotsContainer: false,
       arrowKeys: false,
@@ -175,6 +176,7 @@
     this.fw = options.fixedWidth;
     this.nav = options.nav;
     this.navText = options.navText;
+    this.navContainer = options.navContainer;
     this.dots = options.dots;
     this.dotsContainer = options.dotsContainer;
     this.arrowKeys = options.arrowKeys;
@@ -318,23 +320,29 @@
 
       // add nav
       if (this.nav) {
-        var nav = div.cloneNode(true),
-        prev = div.cloneNode(true),
-        next = div.cloneNode(true);
-        nav.className = 'tiny-nav';
-        prev.className = 'tiny-prev';
-        next.className = 'tiny-next';
-
-        if (this.navText.length === 2) {
-          prev.innerHTML = this.navText[0];
-          next.innerHTML = this.navText[1];
-        }
-        nav.appendChild(prev);
-        nav.appendChild(next);
-        wrapper.appendChild(nav);
+        if (this.navContainer) {
+          var nav = this.navContainer.children;
+          this.prev = nav[0];
+          this.next = nav[1];
+        } else {
+          var nav = div.cloneNode(true),
+          prev = div.cloneNode(true),
+          next = div.cloneNode(true);
+          nav.className = 'tiny-nav';
+          prev.className = 'tiny-prev';
+          next.className = 'tiny-next';
+
+          if (this.navText.length === 2) {
+            prev.innerHTML = this.navText[0];
+            next.innerHTML = this.navText[1];
+          }
+          nav.appendChild(prev);
+          nav.appendChild(next);
+          wrapper.appendChild(nav);
 
-        this.prev = prev;
-        this.next = next;
+          this.prev = prev;
+          this.next = next;
+        }
       }
 
       // clone items
diff --git a/src/js/tiny-slider.min.js b/src/js/tiny-slider.min.js
index 1098f095..3523c09f 100644
--- a/src/js/tiny-slider.min.js
+++ b/src/js/tiny-slider.min.js
@@ -4,4 +4,4 @@
  * @author William Lin
  * @license The MIT License (MIT)
  **/
-!function(t){window.tinySlider=t()}(function(){"usr strict";function t(){for(var t,e,i,n=arguments[0]||{},o=1,a=arguments.length;a>o;o++)if(null!==(t=arguments[o]))for(e in t)i=t[e],n!==i&&void 0!==i&&(n[e]=i);return n}function e(t,e,i){t=t||window;var n=e+Math.round(99999999*Math.random());t.attachEvent?(t["e"+n]=i,t[n]=function(){t["e"+n](window.event)},t.attachEvent("on"+e,t[n])):t.addEventListener(e,i,!1)}function i(t,e){var i=" "+e;-1===t.className.indexOf(i)&&(t.className+=i)}function n(t,e){var i=" "+e;-1!==t.className.indexOf(i)&&(t.className=t.className.replace(i,""))}function o(t){return t&&"object"==typeof t?Object.keys(t):!1}function a(t,e){if(t&&"object"==typeof t){for(var i=[],n=0;n=t[t.length-1])return e[e.length-1];for(var o=0;o=t[o]&&n<=t[o+1])return e[o]}function l(t){for(var e=document.documentElement,i=0;i=0;r--){var l=r>0?s.cloneNode(!0):s;a.appendChild(l)}o.appendChild(a),this.allDots=a.querySelectorAll(".tiny-dot")}if(this.nav){var c=n.cloneNode(!0),d=n.cloneNode(!0),h=n.cloneNode(!0);c.className="tiny-nav",d.className="tiny-prev",h.className="tiny-next",2===this.navText.length&&(d.innerHTML=this.navText[0],h.innerHTML=this.navText[1]),c.appendChild(d),c.appendChild(h),o.appendChild(c),this.prev=d,this.next=h}if(this.loop){for(var p=[],f=[],u=this.container.children[0],m=0;m=0;w--)this.container.insertBefore(f[w],u);this.cul=this.container.children.length,this.children=this.container.children}for(var g=this.fw?this.fw+"px":100/this.cul+"%",C=0;Ca?n(o[a],"tiny-hide"):i(o[a],"tiny-hide")},updateDotsStatus:function(t){var e,o=t.getAbsIndex(t),a=t.allDots,s=t.dotsContainer?t.cl:Math.ceil(t.cl/t.items);if(e=t.dotsContainer?o:t.fw&&o+t.items+1>=t.cul?s-1:Math.floor(o/t.items),!t.loop&&!t.dotsContainer){var r=/^-?[0-9]+$/,l=r.test(t.cl/t.items);l||t.index!==t.cl-t.items||(e+=1)}for(var c=0;s>c;c++)c===e?i(a[c],"tiny-active"):n(a[c],"tiny-active")},onNavClick:function(t,e){if(!t.animating){var i=t.index;t.slideByPage&&(e*=t.items),t.index+=e,t.loop||(t.index=Math.max(0,Math.min(t.index,t.cl-t.items))),t.indexGap=Math.abs(t.index-i);var n=t.fw?t.fwGetContainerLeft(t):-(100*t.index/t.items)+"%";h&&(t.container.style[h]=t.speed*t.indexGap/1e3+"s",t.animating=!0),t.container.style.left=n,t.loop&&setTimeout(function(){d.prototype.clickFallback(t)},t.speed*t.indexGap),setTimeout(function(){t.dots&&d.prototype.updateDotsStatus(t),t.animating=!1},t.speed*t.indexGap)}},fwGetContainerLeft:function(t){var e=t.getAbsIndex(t),i=t.container.parentNode.offsetWidth;return e+t.items+1>=t.cul?-(t.cul*t.fw-i)+"px":-(t.fw*t.index)+"px"},getAbsIndex:function(t){var e=t.index;return 0>e?e+=t.cl:e>=t.cl&&(e-=t.cl),e},clickFallback:function(t){var e=t.slideByPage?t.index<-(t.itemsMax-t.items):t.index<=-t.itemsMax,i=t.slideByPage?t.index>t.cl+t.itemsMax-2*t.items-1:t.index>=t.cl+t.itemsMax-t.items;t.fw&&t.itemsMax&&!t.slideByPage&&(i=t.index>=t.cl+t.itemsMax-t.items-1),e&&(t.index+=t.cl),i&&(t.index-=t.cl);var n=t.fw?-(t.fw*t.index)+"px":-(100*t.index/t.items)+"%";h&&(t.container.style[h]="0s"),t.container.style.left=n},onDotClick:function(t,e){if(!t.animating){var o=t.index;t.loop?t.index=t.dotsContainer?e:e*t.items:t.dotsContainer?t.index=Math.min(e,t.cl-t.items):t.index=Math.min(e*t.items,t.cl-t.items),t.indexGap=Math.abs(t.index-o);var a=t.fw?t.fwGetContainerLeft(t):-(100*t.index/t.items)+"%";h&&(t.container.style[h]=t.speed*t.indexGap/1e3+"s",t.animating=!0),t.container.style.left=a,setTimeout(function(){for(var o=0;oa;a++)if(null!==(t=arguments[a]))for(e in t)i=t[e],n!==i&&void 0!==i&&(n[e]=i);return n}function e(t,e,i){t=t||window;var n=e+Math.round(99999999*Math.random());t.attachEvent?(t["e"+n]=i,t[n]=function(){t["e"+n](window.event)},t.attachEvent("on"+e,t[n])):t.addEventListener(e,i,!1)}function i(t,e){var i=" "+e;-1===t.className.indexOf(i)&&(t.className+=i)}function n(t,e){var i=" "+e;-1!==t.className.indexOf(i)&&(t.className=t.className.replace(i,""))}function a(t){return t&&"object"==typeof t?Object.keys(t):!1}function o(t,e){if(t&&"object"==typeof t){for(var i=[],n=0;n=t[t.length-1])return e[e.length-1];for(var a=0;a=t[a]&&n<=t[a+1])return e[a]}function l(t){for(var e=document.documentElement,i=0;i=0;r--){var l=r>0?s.cloneNode(!0):s;o.appendChild(l)}a.appendChild(o),this.allDots=o.querySelectorAll(".tiny-dot")}if(this.nav)if(this.navContainer){var c=this.navContainer.children;this.prev=c[0],this.next=c[1]}else{var c=n.cloneNode(!0),h=n.cloneNode(!0),d=n.cloneNode(!0);c.className="tiny-nav",h.className="tiny-prev",d.className="tiny-next",2===this.navText.length&&(h.innerHTML=this.navText[0],d.innerHTML=this.navText[1]),c.appendChild(h),c.appendChild(d),a.appendChild(c),this.prev=h,this.next=d}if(this.loop){for(var p=[],f=[],u=this.container.children[0],m=0;m=0;w--)this.container.insertBefore(f[w],u);this.cul=this.container.children.length,this.children=this.container.children}for(var g=this.fw?this.fw+"px":100/this.cul+"%",C=0;Co?n(a[o],"tiny-hide"):i(a[o],"tiny-hide")},updateDotsStatus:function(t){var e,a=t.getAbsIndex(t),o=t.allDots,s=t.dotsContainer?t.cl:Math.ceil(t.cl/t.items);if(e=t.dotsContainer?a:t.fw&&a+t.items+1>=t.cul?s-1:Math.floor(a/t.items),!t.loop&&!t.dotsContainer){var r=/^-?[0-9]+$/,l=r.test(t.cl/t.items);l||t.index!==t.cl-t.items||(e+=1)}for(var c=0;s>c;c++)c===e?i(o[c],"tiny-active"):n(o[c],"tiny-active")},onNavClick:function(t,e){if(!t.animating){var i=t.index;t.slideByPage&&(e*=t.items),t.index+=e,t.loop||(t.index=Math.max(0,Math.min(t.index,t.cl-t.items))),t.indexGap=Math.abs(t.index-i);var n=t.fw?t.fwGetContainerLeft(t):-(100*t.index/t.items)+"%";d&&(t.container.style[d]=t.speed*t.indexGap/1e3+"s",t.animating=!0),t.container.style.left=n,t.loop&&setTimeout(function(){h.prototype.clickFallback(t)},t.speed*t.indexGap),setTimeout(function(){t.dots&&h.prototype.updateDotsStatus(t),t.animating=!1},t.speed*t.indexGap)}},fwGetContainerLeft:function(t){var e=t.getAbsIndex(t),i=t.container.parentNode.offsetWidth;return e+t.items+1>=t.cul?-(t.cul*t.fw-i)+"px":-(t.fw*t.index)+"px"},getAbsIndex:function(t){var e=t.index;return 0>e?e+=t.cl:e>=t.cl&&(e-=t.cl),e},clickFallback:function(t){var e=t.slideByPage?t.index<-(t.itemsMax-t.items):t.index<=-t.itemsMax,i=t.slideByPage?t.index>t.cl+t.itemsMax-2*t.items-1:t.index>=t.cl+t.itemsMax-t.items;t.fw&&t.itemsMax&&!t.slideByPage&&(i=t.index>=t.cl+t.itemsMax-t.items-1),e&&(t.index+=t.cl),i&&(t.index-=t.cl);var n=t.fw?-(t.fw*t.index)+"px":-(100*t.index/t.items)+"%";d&&(t.container.style[d]="0s"),t.container.style.left=n},onDotClick:function(t,e){if(!t.animating){var a=t.index;t.loop?t.index=t.dotsContainer?e:e*t.items:t.dotsContainer?t.index=Math.min(e,t.cl-t.items):t.index=Math.min(e*t.items,t.cl-t.items),t.indexGap=Math.abs(t.index-a);var o=t.fw?t.fwGetContainerLeft(t):-(100*t.index/t.items)+"%";d&&(t.container.style[d]=t.speed*t.indexGap/1e3+"s",t.animating=!0),t.container.style.left=o,setTimeout(function(){for(var a=0;a