Merge pull request #30 from phucbm/2.0.7

v2.0.7

README.md

@@ -1,7 +1,7 @@
 # Flickity Responsive
 
 [![release](https://badgen.net/github/release/phucbm/flickity-responsive/)](https://github.com/phucbm/flickity-responsive/releases/latest)
-[![minified](https://badgen.net/badge/minified/4KB/cyan)](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)
+[![minified](https://badgen.net/badge/minified/7KB/cyan)](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)
 [![jsdelivr](https://data.jsdelivr.com/v1/package/gh/phucbm/flickity-responsive/badge?style=rounded)](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)
 [![npm weekly download](https://badgen.net/npm/dm/flickity-responsive)](https://www.npmjs.com/package/flickity-responsive)
 [![license](https://badgen.net/github/license/phucbm/flickity-responsive/)](https://github.com/phucbm/flickity-responsive/blob/main/LICENSE)
@@ -54,7 +54,7 @@ import {FlickityResponsive} from "flickity-responsive";
 
 ```html
 
-<script src="https://cdn.jsdelivr.net/gh/phucbm/[email protected].6/flickity-responsive.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/phucbm/[email protected].7/flickity-responsive.min.js"></script>
 ```
 
 ## Usage
@@ -110,8 +110,8 @@ const carousel = new FlickityResponsive('.carousel', {
     nextArrow: undefined, // DOM element, jQuery element
 
     // indicator numbers
-    indicatorCurrent: undefined, // DOM element, jQuery element
-    indicatorTotal: undefined, // DOM element, jQuery element
+    indicatorCurrent: undefined, // current slides, DOM element, jQuery element
+    indicatorTotal: undefined, // total slides, DOM element, jQuery element
 
     // hide navigation elements if the slider is not slide-able
     responsiveNavigation: true,
@@ -149,14 +149,14 @@ npm run prod
 # Publish package
 npm publish
 
-# Netlify build
+# build
 npm run build
 ```
 
 ## License
 
 [MIT License](https://github.com/phucbm/flickity-responsive/blob/master/LICENSE)
 
-Copyright (c) 2023 Phuc Bui
+Copyright (c) 2024 Phuc Bui
 
 > Please leave a star ⭐️ to support my work. Thank you!

dev/index.html

@@ -114,23 +114,69 @@ <h2>Init with HTML</h2>
         <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>
+        </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>
+        <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>
-        <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>
         <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>
-        <pre>
+
+        <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%"
+});</pre>
+        </details>
+
+        <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>
+        </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>
+        </div>
+
+
+        <details>
+            <summary>View code</summary>
+
+            <pre>
 // custom arrows
 const carouselArrows = new FlickityResponsive('.carousel-arrows', {
     prevNextButtons: false,
@@ -139,8 +185,11 @@ <h2>Custom arrows and indicator numbers</h2>
     prevArrow: document.querySelector('#prev'),
     nextArrow: jQuery('#next'),
     cellAlign: 'center',
-    contain: true
+    contain: true,
+    groupCells: 1
 });</pre>
+
+        </details>
     </section>
 
     <section class="mb100">

dev/script.js

@@ -58,5 +58,16 @@ const carouselArrows = new FlickityResponsive('.carousel-arrows', {
     prevArrow: document.querySelector('#prev'),
     nextArrow: jQuery('#next'),
     cellAlign: 'center',
-    contain: true
+    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,
 });