Merge pull request #34 from phucbm/2.1.0

2.1.0
phucbm · Jan 9, 2025 · e9c672f · e9c672f
2 parents 347e84e + 548ec42
commit e9c672f
Show file tree

Hide file tree

Showing 13 changed files with 294 additions and 125 deletions.
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ import {FlickityResponsive} from "flickity-responsive";
 
 ```html
 
-<script src="https://cdn.jsdelivr.net/gh/phucbm/flickity-responsive@2.0.7/flickity-responsive.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/phucbm/flickity-responsive@2.1.0/flickity-responsive.min.js"></script>
 ```
 
 ## Usage
@@ -157,6 +157,6 @@ npm run build
 
 [MIT License](https://github.com/phucbm/flickity-responsive/blob/master/LICENSE)
 
-Copyright (c) 2024 Phuc Bui
+Copyright (c) 2021-2025 Phuc Bui
 
 > Please leave a star ⭐️ to support my work. Thank you!
diff --git a/config/config.js b/config/config.js
@@ -16,7 +16,7 @@ const bannerConfig = {
  * ${packageInfo.prettyName} v${packageInfo.version}
  * @author ${packageInfo.author.name}
  * @homepage ${packageInfo.homepage}
- * @license ${packageInfo.license} ${new Date().getFullYear()}
+ * @license ${packageInfo.license} 2021-${new Date().getFullYear()}
  */`,
     raw: true
 };

diff --git a/dev/index.html b/dev/index.html
@@ -4,9 +4,45 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
+    <meta name="description"
+          content="Flickity Responsive is a JavaScript library that extends Flickity to support responsive design.">
+    <meta name="keywords" content="flickity, responsive, javascript, library, slider, carousel"/>
+    <meta name="author" content="Phuc Bui"/>
+    <meta name="robots" content="index, follow"/>
+    <meta name="googlebot" content="index, follow"/>
+    <meta name="google" content="notranslate"/>
+    <meta name="generator" content="Visual Studio Code"/>
+    <meta name="rating" content="general"/>
+    <meta name="revisit-after" content="7 days"/>
+    <meta name="distribution" content="global"/>
+    <meta name="theme-color" content="#ffffff"/>
+    <meta name="twitter:card" content="summary"/>
+    <meta name="twitter:site" content="@phucbm"/>
+    <meta name="twitter:creator" content="@phucbm"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:site_name" content="Flickity Responsive"/>
+    <meta property="og:title" content="Flickity Responsive"/>
+    <meta property="og:description"
+          content="Flickity Responsive is a JavaScript library that extends Flickity to support responsive design."/>
+    <meta property="og:image"
+          content="https://raw.githubusercontent.com/phucbm/flickity-responsive/master/public/images/favicon.png"/>
+    <meta property="og:url" content="https://github.com/phucbm/flickity-responsive"/>
 
     <title>Flickity Responsive</title>
 
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-NC8XZ762Y4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag(){
+            dataLayer.push(arguments);
+        }
+
+        gtag('js', new Date());
+
+        gtag('config', 'G-NC8XZ762Y4');
+    </script>
 </head>
 
 <body>
@@ -101,7 +137,6 @@ <h2>Init with jQuery</h2>
 
     <section class="mb100">
         <h2>Init with HTML</h2>
-        <p>Navigation elements (dots, arrows) will auto-hide if the carousel is not slide-able.</p>
         <div data-flickity-responsive='{ "cellAlign": "left" }'>
             <div class="carousel-cell" style="width:260px;"></div>
             <div class="carousel-cell" style="width:260px;"></div>
@@ -113,81 +148,131 @@ <h2>Init with HTML</h2>
     <section class="mb100">
         <p style="margin-bottom:0;"><span class="extra-feature">Extra feature</span></p>
         <div class="d-flex jc-space-between ai-center">
-            <h2>Custom arrows and indicator numbers</h2>
+            <h2>Responsive navigation</h2>
         </div>
-        <p>Use <code>prevArrow</code> and <code>nextArrow</code> to assign custom prev/next buttons.</p>
-        <p>Use <code>indicatorCurrent</code> and <code>indicatorTotal</code> to receive update about slide's position.
+        <p>Automatically detect whether the slider is slide-able or not on load and resize.
+            If the slider is not slide-able, the navigation elements will be hidden, draggable will be disabled.
         </p>
-        <p>
-            Notice that the total number is for the slides, not the cells. If you have 6 cells but only 2 slides, and
-            <code>groupCells:"100%"</code>, the
-            total number will be 2. The first slide will have 3 cells and the second slide will have 2 cells.
-            The total slide number is calculated by <code>groupCells</code>.
-        </p>
-        <div class="d-flex jc-space-between ai-center">
-            <h3><code>groupCells:"100%"</code></h3>
-            <div class="d-flex ai-center" style="gap:10px;">
-                <button id="prev">Prev</button>
-                <div><span id="current">0</span>/<span id="total">0</span></div>
-                <button id="next">Next</button>
-            </div>
-        </div>
-        <div class="carousel-arrows">
-            <div class="carousel-cell"></div>
-            <div class="carousel-cell"></div>
-            <div class="carousel-cell"></div>
-            <div class="carousel-cell"></div>
-            <div class="carousel-cell"></div>
+        <div class="d-flex jc-space-between ai-center"></div>
+        <div data-flickity-responsive>
+            <div class="carousel-cell" style="min-width:250px;"></div>
+            <div class="carousel-cell" style="min-width:250px;"></div>
+            <div class="carousel-cell" style="min-width:250px;"></div>
         </div>
 
         <details>
             <summary>View code</summary>
             <pre>
 // custom arrows
 const carouselArrows = new FlickityResponsive('.carousel-arrows', {
-    prevNextButtons: false,
-    indicatorCurrent: document.querySelector('#current'),
-    indicatorTotal: document.querySelector('#total'),
-    prevArrow: document.querySelector('#prev'),
-    nextArrow: jQuery('#next'),
-    cellAlign: 'center',
-    contain: true,
-    groupCells: "100%"
+    responsiveNavigation: true, // true by default
 });</pre>
         </details>
+    </section>
 
+
+    <section class="mb100">
+        <p style="margin-bottom:0;"><span class="extra-feature">Extra feature</span></p>
         <div class="d-flex jc-space-between ai-center">
-            <h3><code>groupCells:1</code></h3>
-            <div class="d-flex ai-center" style="gap:10px;">
-                <button id="prev-2">Prev</button>
-                <div><span id="current-2">0</span>/<span id="total-2">0</span></div>
-                <button id="next-2">Next</button>
-            </div>
+            <h2>Custom arrows</h2>
         </div>
-        <div class="carousel-arrows-2">
-            <div class="carousel-cell"></div>
-            <div class="carousel-cell"></div>
-            <div class="carousel-cell"></div>
-            <div class="carousel-cell"></div>
-            <div class="carousel-cell"></div>
+        <p>Use <code>prevArrow</code> and <code>nextArrow</code> to assign custom prev/next buttons. Allow to assign
+            multiple arrows.</p>
+        <div>
+            <div class="d-flex jc-space-between ai-center mb20">
+                <div class="d-flex ai-center" style="gap:10px;">
+                    <button class="backward">Go backward</button>
+                    <button class="forward">Go forward</button>
+                </div>
+                <div class="d-flex ai-center" style="gap:10px;">
+                    <button id="prev">Prev</button>
+                    <div><span data-indicator-current>0</span>/<span data-indicator-total>0</span></div>
+                    <button id="next">Next</button>
+                </div>
+            </div>
+            <div class="carousel-arrows">
+                <div class="carousel-cell"></div>
+                <div class="carousel-cell"></div>
+                <div class="carousel-cell"></div>
+                <div class="carousel-cell"></div>
+                <div class="carousel-cell"></div>
+            </div>
         </div>
 
-
         <details>
-            <summary>View code</summary>
-
+            <summary>Using JS</summary>
             <pre>
 // custom arrows
 const carouselArrows = new FlickityResponsive('.carousel-arrows', {
-    prevNextButtons: false,
-    indicatorCurrent: document.querySelector('#current'),
-    indicatorTotal: document.querySelector('#total'),
-    prevArrow: document.querySelector('#prev'),
-    nextArrow: jQuery('#next'),
-    cellAlign: 'center',
-    contain: true,
-    groupCells: 1
+    prevArrow: document.querySelectorAll('#prev, .backward'),
+    nextArrow: document.querySelectorAll('#next, .forward')
 });</pre>
+        </details>
+
+        <details>
+            <summary>Using HTML attribute</summary>
+            <p>
+                Use <code>data-prev-arrow</code> and <code>data-next-arrow</code> to assign custom prev/next buttons.
+                Make sure the slider element and the arrow element are in the same parent.
+            </p>
+        </details>
+    </section>
+
+
+    <section class="mb100">
+        <p style="margin-bottom:0;"><span class="extra-feature">Extra feature</span></p>
+        <div class="d-flex jc-space-between ai-center">
+            <h2>Indicator numbers</h2>
+        </div>
+        <p>Use <code>indicatorCurrent</code> and <code>indicatorTotal</code> to receive update about slide's position.
+        </p>
+        <p>
+            Notice that the total number is for the slides, not the cells. If you have 6 cells but only 2 slides, and
+            <code>groupCells:"100%"</code>, the
+            total number will be 2. The first slide will have 3 cells and the second slide will have 2 cells.
+            The total slide number is calculated by <code>groupCells</code>.
+        </p>
+
+        <div>
+            <div class="d-flex jc-space-between ai-center">
+                <div class="d-flex ai-center" style="gap:10px;">
+                    <div><span data-indicator-current>0</span>/<span data-indicator-total>0</span></div>
+                </div>
+                <div class="d-flex ai-center" style="gap:10px;">
+                    <button data-prev-arrow>Prev</button>
+                    <div><span data-indicator-current>0</span>/<span data-indicator-total>0</span></div>
+                    <button data-next-arrow>Next</button>
+                </div>
+            </div>
+            <div data-flickity-responsive>
+                <div class="carousel-cell"></div>
+                <div class="carousel-cell"></div>
+                <div class="carousel-cell"></div>
+                <div class="carousel-cell"></div>
+                <div class="carousel-cell"></div>
+            </div>
+        </div>
+
+
+        <details>
+            <summary>Using JS</summary>
+
+            <pre>
+const carouselIndicator = new FlickityResponsive('.carousel-indicator', {
+    indicatorCurrent: document.querySelector('.current-number'),
+    indicatorTotal: document.querySelector('.total-number')
+});
+            </pre>
+
+        </details>
+        <details>
+            <summary>Using HTML attribute</summary>
+
+            <p>
+                Use <code>data-indicator-current</code> and <code>data-indicator-total</code> to receive update about
+                slide's position.
+                Make sure the slider element and the indicator element are in the same parent.
+            </p>
 
         </details>
     </section>
@@ -240,7 +325,7 @@ <h2>Force move</h2>
                 </svg>
             </a>
         </p>
-        <p>Copyright (c) 2023 <a href="https://github.com/phucbm" target="_blank">Phuc Bui</a></p>
+        <p>Copyright (c) 2021-2025 <a href="https://github.com/phucbm" target="_blank">Phuc Bui</a></p>
         <p>Please leave a <a href="https://github.com/phucbm/flickity-responsive" style="font-weight:700;">star ⭐️</a>
             to support my work. Thank you!</p>
     </footer>

diff --git a/dev/script.js b/dev/script.js
@@ -53,21 +53,19 @@ if(typeof jQuery !== 'undefined'){
 // custom arrows
 const carouselArrows = new FlickityResponsive('.carousel-arrows', {
     prevNextButtons: false,
-    indicatorCurrent: document.querySelector('#current'),
-    indicatorTotal: document.querySelector('#total'),
-    prevArrow: document.querySelector('#prev'),
-    nextArrow: jQuery('#next'),
+    prevArrow: document.querySelectorAll('#prev, .backward'),
+    nextArrow: document.querySelectorAll('#next, .forward'),
     cellAlign: 'center',
     contain: true,
     groupCells: '100%',
 });
-const carouselArrows2 = new FlickityResponsive('.carousel-arrows-2', {
-    prevNextButtons: false,
-    indicatorCurrent: document.querySelector('#current-2'),
-    indicatorTotal: document.querySelector('#total-2'),
-    prevArrow: document.querySelector('#prev-2'),
-    nextArrow: jQuery('#next-2'),
-    cellAlign: 'center',
-    contain: true,
-    groupCells: 1,
-});
+
+// with indicator
+// const carouselIndicator = new FlickityResponsive('.carousel-indicator', {
+//     prevNextButtons: false,
+//     // indicatorCurrent: document.querySelector('.current-number'),
+//     // indicatorTotal: document.querySelector('.total-number'),
+//     cellAlign: 'center',
+//     contain: true,
+//     groupCells: 1,
+// });
diff --git a/dev/style.scss b/dev/style.scss
@@ -1,12 +1,16 @@
 .carousel-cell {
   width: calc(33.33% - 20px / 3);
   height: 200px;
-  margin-right: 10px;
+
   background: #8C8;
   border-radius: 5px;
   counter-increment: carousel-cell;
 }
 
+.carousel-cell:not(:last-child) {
+  margin-right: 10px;
+}
+
 /* cell number */
 .carousel-cell:before {
   display: block;
@@ -32,6 +36,10 @@ body .flickity-page-dots {
   margin-bottom: 50px;
 }
 
+.mb20 {
+  margin-bottom: 20px;
+}
+
 .pt100 {
   padding-top: 100px;
 }