Swapping order of single item and multiple item carousel

since Glider.js is more aptly designed for item listing as opposed to image carousels Removing e-mail address from docs to cut down on spam
NickPiscitelli · Feb 2, 2020 · 75f6763 · 75f6763
1 parent cd00d50
commit 75f6763
Showing 1 changed file with 61 additions and 73 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -109,6 +109,67 @@ <h2>Features</h2>
         </div>
       </section>
 
+      <div class="demo">
+        <h2>Multiple Items</h2>
+        <div data-name="Multiple Item" class="glider-contain multiple">
+          <div class="gradient-border-bottom">
+            <div class="gradient-border">
+              <div class="glider" id="glider-double">
+                <div><h1>1</h1></div>
+                <div><h1>2</h1></div>
+                <div><h1>3</h1></div>
+                <div><h1>4</h1></div>
+                <div><h1>5</h1></div>
+                <div><h1>6</h1></div>
+                <div><h1>7</h1></div>
+                <div><h1>8</h1></div>
+                <div><h1>9</h1></div>
+                <div><h1>10</h1></div>
+                <div><h1>11</h1></div>
+                <div><h1>12</h1></div>
+                <div><h1>13</h1></div>
+                <div><h1>14</h1></div>
+                <div><h1>15</h1></div>
+                <div><h1>16</h1></div>
+                <div><h1>17</h1></div>
+                <div><h1>18</h1></div>
+              </div>
+            </div>
+          </div>
+          <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-2"><i class="fa fa-chevron-left"></i></i></button>
+          <button role="button" aria-label="Next" class="glider-next" id="glider-next-2"><i class="fa fa-chevron-right"></i></i></button>
+          <div id="dots2"></div>
+        </div>
+        <script>
+          window.addEventListener('load', function () {
+            window.glides = new Glider(document.getElementById('glider-double'), {
+              slidesToShow: 5,
+              slidesToScroll: 5,
+              draggable: true,
+              dots: '#dots2',
+              arrows: {
+                prev: '#glider-prev-2',
+                next: '#glider-next-2'
+              }
+            })
+          });
+        </script>
+        <pre class="line-numbers language-javascript">
+          <code class="line-numbers language-javascript">
+            new Glider(document.querySelector('.glider'), {
+              slidesToShow: 5,
+              slidesToScroll: 5,
+              draggable: true,
+              dots: '.dots',
+              arrows: {
+                prev: '.glider-prev',
+                next: '.glider-next'
+              }
+            });
+          </code>
+        </pre>
+      </div>
+
       <!-- First Section -->
       <section id="demos" class="main special">
         <header class="major">
@@ -169,68 +230,6 @@ <h2>Single Item</h2>
           </pre>
         </div>
 
-        <div class="demo">
-          <h2>Multiple Item</h2>
-          <div data-name="Multiple Item" class="glider-contain multiple">
-            <div class="gradient-border-bottom">
-              <div class="gradient-border">
-                <div class="glider" id="glider-double">
-                  <div><h1>1</h1></div>
-                  <div><h1>2</h1></div>
-                  <div><h1>3</h1></div>
-                  <div><h1>4</h1></div>
-                  <div><h1>5</h1></div>
-                  <div><h1>6</h1></div>
-                  <div><h1>7</h1></div>
-                  <div><h1>8</h1></div>
-                  <div><h1>9</h1></div>
-                  <div><h1>10</h1></div>
-                  <div><h1>11</h1></div>
-                  <div><h1>12</h1></div>
-                  <div><h1>13</h1></div>
-                  <div><h1>14</h1></div>
-                  <div><h1>15</h1></div>
-                  <div><h1>16</h1></div>
-                  <div><h1>17</h1></div>
-                  <div><h1>18</h1></div>
-                </div>
-              </div>
-            </div>
-            <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-2"><i class="fa fa-chevron-left"></i></i></button>
-            <button role="button" aria-label="Next" class="glider-next" id="glider-next-2"><i class="fa fa-chevron-right"></i></i></button>
-            <div id="dots2"></div>
-          </div>
-          <script>
-            window.addEventListener('load', function () {
-              window.glides = new Glider(document.getElementById('glider-double'), {
-                slidesToShow: 5,
-                slidesToScroll: 5,
-                draggable: true,
-                dots: '#dots2',
-                arrows: {
-                  prev: '#glider-prev-2',
-                  next: '#glider-next-2'
-                }
-              })
-            });
-          </script>
-          <pre class="line-numbers language-javascript">
-            <code class="line-numbers language-javascript">
-              new Glider(document.querySelector('.glider'), {
-                slidesToShow: 5,
-                slidesToScroll: 5,
-                draggable: true,
-                dots: '.dots',
-                arrows: {
-                  prev: '.glider-prev',
-                  next: '.glider-next'
-                }
-              });
-            </code>
-          </pre>
-        </div>
-
-
         <div class="demo persp">
           <h2>Perspective View<span class="aside">(themeable CSS)</span></h2>
           <div data-name="Perspective View" class="glider-contain multiple">
@@ -1214,17 +1213,6 @@ <h2>FAQ</h2>
               </aside>
             </p>
           </li>
-          <li>
-            <p class="question">
-              Um, I still have questions.
-            </p>
-            <p class="answer">
-              Feel free to drop me a line at mail &lt;at&gt; <a href="https://nickpiscitelli.com">nickpiscitell.com!</a>
-
-
-            </p>
-          </li>
-
         </ul>
 
       </section>