Patternslib#1067 - Add responsive options to carousel

stefanbutura · Sep 22, 2022 · b0c6f17 · b0c6f17
1 parent 9c0dcb5
commit b0c6f17
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/src/pat/carousel/carousel.js b/src/pat/carousel/carousel.js
@@ -21,6 +21,10 @@ parser.addArgument("slides-to-scroll", 1);
 parser.addArgument("dots", "show");
 parser.addArgument("append-dots", "");
 parser.addArgument("infinite", false);
+parser.addArgument("breakpoint1", "");
+parser.addArgument("breakpoint2", "");
+parser.addArgument("breakpoint1-slides-to-show", 1);
+parser.addArgument("breakpoint2-slides-to-show", 1);
 
 export default Base.extend({
     name: "carousel",
@@ -49,6 +53,25 @@ export default Base.extend({
             this.settings.appendDots = this.options.appendDots;
         }
 
+        var responsive_options = [];
+        if (this.options['breakpoint1']) {
+            responsive_options.push({
+                breakpoint: this.options['breakpoint1'],
+                settings: {
+                    slidesToShow: this.options['breakpoint1SlidesToShow']
+                }
+            });
+        }
+        if (this.options['breakpoint2']) {
+            responsive_options.push({
+                breakpoint: this.options['breakpoint2'],
+                settings: {
+                    slidesToShow: this.options['breakpoint2SlidesToShow']
+                }
+            });
+        }
+        this.settings.responsive = responsive_options;
+
         ImagesLoaded(this.el, () => this.setup());
     },
 

diff --git a/src/pat/carousel/index.html b/src/pat/carousel/index.html
@@ -181,6 +181,28 @@ <h2>Non-image content</h2>
                     src="http://farm3.staticflickr.com/2581/3881246563_187586ddc5_z_d.jpg"/>
             </div>
         </div>
+
+        <h3>Responsive carousel</h3>
+
+        <ul class="pat-carousel"
+            data-pat-carousel="slides-to-show: 2; breakpoint1: 1200; breakpoint2: 767; breakpoint1-slides-to-show: 1; breakpoint2-slides-to-show: 1">
+          <li id="li-list26">
+            <img
+              alt=""
+              src="http://farm8.staticflickr.com/7274/7591031938_76b64e13fa_z_d.jpg"/>
+          </li>
+          <li id="li-list27">
+            <img
+              alt=""
+              src="http://farm8.staticflickr.com/7123/7591044464_e593c023df_z_d.jpg"/>
+          </li>
+          <li id="li-list28">
+            <img
+              alt=""
+              src="http://farm3.staticflickr.com/2581/3881246563_187586ddc5_z_d.jpg"/>
+          </li>
+        </ul>
+
         <footer>
             All image are copyright 2012 by
             <a href="http://www.wiggy.net/">Wichert Akkerman</a>.