@beyonk/svelte-carousel - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0

dist/index.js

@@ -344,3 +344,66 @@ (function (global, factory) {
 
-    // (10:2) {#each pips as pip, i}
+    // (9:4) {#if dots}
+    function create_if_block(ctx) {
+    	var ul;
+
+    	var each_value = ctx.pips;
+
+    	var each_blocks = [];
+
+    	for (var i = 0; i < each_value.length; i += 1) {
+    		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+    	}
+
+    	return {
+    		c() {
+    			ul = element("ul");
+
+    			for (var i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+    			attr(ul, "class", "svelte-1ppqxio");
+    		},
+
+    		m(target, anchor) {
+    			insert(target, ul, anchor);
+
+    			for (var i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].m(ul, null);
+    			}
+    		},
+
+    		p(changed, ctx) {
+    			if (changed.currentIndex || changed.pips) {
+    				each_value = ctx.pips;
+
+    				for (var i = 0; i < each_value.length; i += 1) {
+    					const child_ctx = get_each_context(ctx, each_value, i);
+
+    					if (each_blocks[i]) {
+    						each_blocks[i].p(changed, child_ctx);
+    					} else {
+    						each_blocks[i] = create_each_block(child_ctx);
+    						each_blocks[i].c();
+    						each_blocks[i].m(ul, null);
+    					}
+    				}
+
+    				for (; i < each_blocks.length; i += 1) {
+    					each_blocks[i].d(1);
+    				}
+    				each_blocks.length = each_value.length;
+    			}
+    		},
+
+    		d(detaching) {
+    			if (detaching) {
+    				detach(ul);
+    			}
+
+    			destroy_each(each_blocks, detaching);
+    		}
+    	};
+    }
+
+    // (11:2) {#each pips as pip, i}
     function create_each_block(ctx) {
@@ -382,3 +445,3 @@ var li, li_class_value, dispose;
     function create_fragment(ctx) {
-    	var div1, button0, t0, div0, t1, ul, t2, button1, current, dispose;
+    	var div1, button0, t0, div0, t1, t2, button1, current, dispose;
 
@@ -391,10 +454,4 @@ const left_control_slot_1 = ctx.$$slots["left-control"];
 
-    	var each_value = ctx.pips;
+    	var if_block = (ctx.dots) && create_if_block(ctx);
 
-    	var each_blocks = [];
-
-    	for (var i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
-    	}
-
     	const right_control_slot_1 = ctx.$$slots["right-control"];
@@ -414,8 +471,3 @@ const right_control_slot = create_slot(right_control_slot_1, ctx, get_right_control_slot_context);
     			t1 = space();
-    			ul = element("ul");
-
-    			for (var i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].c();
-    			}
-
+    			if (if_block) if_block.c();
     			t2 = space();
@@ -427,7 +479,8 @@ button1 = element("button");
     			attr(button0, "class", "left svelte-1ppqxio");
+    			attr(button0, "aria-label", "left");
 
     			attr(div0, "class", "slides");
-    			attr(ul, "class", "svelte-1ppqxio");
 
     			attr(button1, "class", "right svelte-1ppqxio");
+    			attr(button1, "aria-label", "right");
     			attr(div1, "class", "carousel svelte-1ppqxio");
@@ -466,8 +519,3 @@
     			append(div1, t1);
-    			append(div1, ul);
-
-    			for (var i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].m(ul, null);
-    			}
-
+    			if (if_block) if_block.m(div1, null);
     			append(div1, t2);
@@ -497,21 +545,13 @@ append(div1, button1);
 
-    			if (changed.currentIndex || changed.pips) {
-    				each_value = ctx.pips;
-
-    				for (var i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context(ctx, each_value, i);
-
-    					if (each_blocks[i]) {
-    						each_blocks[i].p(changed, child_ctx);
-    					} else {
-    						each_blocks[i] = create_each_block(child_ctx);
-    						each_blocks[i].c();
-    						each_blocks[i].m(ul, null);
-    					}
+    			if (ctx.dots) {
+    				if (if_block) {
+    					if_block.p(changed, ctx);
+    				} else {
+    					if_block = create_if_block(ctx);
+    					if_block.c();
+    					if_block.m(div1, t2);
     				}
-
-    				for (; i < each_blocks.length; i += 1) {
-    					each_blocks[i].d(1);
-    				}
-    				each_blocks.length = each_value.length;
+    			} else if (if_block) {
+    				if_block.d(1);
+    				if_block = null;
     			}
@@ -548,5 +588,4 @@
     			ctx.div0_binding(null, div0);
+    			if (if_block) if_block.d();
 
-    			destroy_each(each_blocks, detaching);
-
     			if (right_control_slot) right_control_slot.d(detaching);
@@ -561,3 +600,3 @@ run_all(dispose);
     	
-    	let { perPage = 3, loop = true, autoplay = 0, duration = 200, easing = 'ease-out', startIndex = 0, draggable = true, multipleDrag = true, threshold = 20, rtl = false } = $$props;
+    	let { perPage = 3, loop = true, autoplay = 0, duration = 200, easing = 'ease-out', startIndex = 0, draggable = true, multipleDrag = true, dots = true, threshold = 20, rtl = false } = $$props;
     	let currentIndex = startIndex;
@@ -635,2 +674,3 @@
     		if ('multipleDrag' in $$props) $$invalidate('multipleDrag', multipleDrag = $$props.multipleDrag);
+    		if ('dots' in $$props) $$invalidate('dots', dots = $$props.dots);
     		if ('threshold' in $$props) $$invalidate('threshold', threshold = $$props.threshold);
@@ -656,2 +696,3 @@ if ('rtl' in $$props) $$invalidate('rtl', rtl = $$props.rtl);
     		multipleDrag,
+    		dots,
     		threshold,
@@ -676,3 +717,3 @@ rtl,
     		if (!document.getElementById("svelte-1ppqxio-style")) add_css();
-    		init(this, options, instance, create_fragment, safe_not_equal, ["perPage", "loop", "autoplay", "duration", "easing", "startIndex", "draggable", "multipleDrag", "threshold", "rtl"]);
+    		init(this, options, instance, create_fragment, safe_not_equal, ["perPage", "loop", "autoplay", "duration", "easing", "startIndex", "draggable", "multipleDrag", "dots", "threshold", "rtl"]);
     	}
@@ -679,0 +720,0 @@ }

package.json

@@ -6,3 +6,3 @@ {
   "main": "dist/index.js",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "scripts": {
@@ -9,0 +9,0 @@ "build": "rollup -c",

README.md

@@ -19,2 +19,4 @@ <p align="center">
 
+The [simplest possible demo](https://svelte.dev/repl/3953567d530b41d087ab7eaa8e7e632a?version=3.22.3)
+
 ```
@@ -102,4 +104,4 @@ npm install
 | multipleDrag | boolean | true	      | Allow dragging to move multiple slides.                                                 				     |
+| dots | boolean | true	      | Toggles visibility of slider dots.                                                 				  	       |
 | threshold | number | 20	      | Touch and mouse dragging threshold (in px).                                                 				     |
-| loop | boolean | false	      | Loop the slides around.                                                 				  	       |
 | rtl | boolean | false	      | Enables layout for languages written from right to left (like Hebrew or Arabic).                                                |
@@ -106,0 +108,0 @@

No alert changes

Improved metrics

Total package byte prevSize

77979

increased by2.54%

Lines of code

1340

increased by5.85%

Number of lines in readme file

121

increased by1.68%

No dependency changes