add navContainer

ganlanyuan · Dec 14, 2015 · 5cb3e7e · 5cb3e7e
1 parent 7568c7f
commit 5cb3e7e
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 33 deletions.
diff --git 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({
   <div></div>
 </div>
 
-<!-- customized dots -->
+<!-- customized nav & dots -->
+<div class="slider-nav">
+  <div></div>
+  <div></div>
+</div>
 <div class="thumbnails">
   <div></div>
   <div></div>
@@ -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
@@ -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
@@ -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 @@ <h2>fixed width</h2>
     </code></pre>
   </section>
   <section>
-    <h2>Customize dots</h2>
-    <ul class="customize-dots">
+    <h2>Customize</h2>
+    <ul class="customize">
       <li>
         <div><img src="images/1.jpg" alt=""></div>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sed harum quaerat dicta cum tempora modi assumenda porro perferendis. Alias.</p>
@@ -214,18 +229,24 @@ <h2>Customize dots</h2>
         <p>Laborum officiis, magnam, eos possimus aliquam reiciendis odit alias nulla odio, ipsa expedita, placeat neque repellendus architecto ut quam consequuntur.</p>
       </li>
     </ul>
-    <ul class="thumbnails">
-      <li><img src="images/sm/1.jpg" alt=""></li>
-      <li><img src="images/sm/2.jpg" alt=""></li>
-      <li><img src="images/sm/3.jpg" alt=""></li>
-      <li><img src="images/sm/4.jpg" alt=""></li>
-      <li><img src="images/sm/5.jpg" alt=""></li>
-      <li><img src="images/sm/6.jpg" alt=""></li>
-      <li><img src="images/sm/7.jpg" alt=""></li>
-      <li><img src="images/sm/8.jpg" alt=""></li>
-    </ul>
+    <div class="controls">
+      <ul class="thumbnails">
+        <li><img src="images/sm/1.jpg" alt=""></li>
+        <li><img src="images/sm/2.jpg" alt=""></li>
+        <li><img src="images/sm/3.jpg" alt=""></li>
+        <li><img src="images/sm/4.jpg" alt=""></li>
+        <li><img src="images/sm/5.jpg" alt=""></li>
+        <li><img src="images/sm/6.jpg" alt=""></li>
+        <li><img src="images/sm/7.jpg" alt=""></li>
+        <li><img src="images/sm/8.jpg" alt=""></li>
+      </ul>
+      <ul class="slider-nav">
+        <li>〈</li>
+        <li>〉</li>
+      </ul>
+    </div>
     <pre><code class="language-javascript">
-var customizedots = document.querySelector('.customize-dots');
+var customizedots = document.querySelector('.customize');
 
 tinySlider({
   container: customizedots,
@@ -431,7 +452,7 @@ <h2>arrow keys</h2>
       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 @@ <h2>arrow keys</h2>
   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
@@ -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