diff --git a/demo/index.html b/demo/index.html index fa2f387..9cd995a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,8 +12,12 @@ font-size: 30px; } + +

+ Multiple Items: +

1 2 @@ -31,7 +35,6 @@ - + +

+ Single Item: +

+ + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + +
+ Methods:
+ + + + +
+ diff --git a/lib/MultiCarousel.js b/lib/MultiCarousel.js index c2c0213..a3b1b7c 100644 --- a/lib/MultiCarousel.js +++ b/lib/MultiCarousel.js @@ -1,26 +1,31 @@ var MultiCarousel = (function () { 'use strict'; var template = (function () { - let transitioning = false, timer, width, transition; return { oncreate () { + this.set({ + __transitioning: false, + __timer: null, + __width: null, + __transition: null + }); const carousel = this.refs.carousel; const items = this.get("items"); const count = this.get("count"); - width = (100 / count)+"%"; + this.set({__width: (100 / count)+"%"}); for (let i = 0; i < items.length; i++) { this.refs.items.appendChild(items[i]); - items[i].style.width = width; + items[i].style.width = this.get("__width"); } for (let i = 0; i < count; i++) { items[i].classList.add("active"); } - transition = "left "+(this.get("transition") / 1000)+"s"; + this.set({__transition: "left "+(this.get("transition") / 1000)+"s"}); this.refs.items.style.left = "0"; - this.refs.items.style.transition = transition; + this.refs.items.style.transition = this.get("__transition"); if (items.length <= count) { // Don't animate. - transitioning = true; + this.set({__transitioning: true}); } else { this.start(); } @@ -35,8 +40,8 @@ var template = (function () { }, methods: { next () { - if (transitioning) return; - transitioning = true; + if (this.get("__transitioning")) return; + this.set({__transitioning: true}); const children = this.refs.items.children; let foundActive = false; let previous; @@ -52,28 +57,28 @@ var template = (function () { break; } } - this.refs.items.style.transition = transition; - this.refs.items.style.left = "-"+width; + this.refs.items.style.transition = this.get("__transition"); + this.refs.items.style.left = "-"+this.get("__width"); // Wait the transition time, then move the previous element to the end. setTimeout((function() { previous.classList.remove("active"); this.refs.items.style.transition = ""; this.refs.items.style.left = "0"; this.refs.items.appendChild(previous); - transitioning = false; + this.set({__transitioning: false}); }).bind(this), this.get("transition")); }, previous () { - if (transitioning) return; - transitioning = true; + if (this.get("__transitioning")) return; + this.set({__transitioning: true}); const children = this.refs.items.children; let previous = children[children.length - 1]; previous.classList.add("active"); this.refs.items.insertBefore(previous, children[0]); this.refs.items.style.transition = ""; - this.refs.items.style.left = "-"+width; + this.refs.items.style.left = "-"+this.get("__width"); setTimeout((function(){ - this.refs.items.style.transition = transition; + this.refs.items.style.transition = this.get("__transition"); this.refs.items.style.left = "0"; }).bind(this), 0); // Wait the transition time. @@ -86,16 +91,16 @@ var template = (function () { } } this.refs.items.style.transition = ""; - transitioning = false; + this.set({__transitioning: false}); }).bind(this), this.get("transition")); }, pause () { - clearInterval(timer); - timer = null; + clearInterval(this.get("__timer")); + this.set({__timer: null}); }, start () { - if (!timer && this.get("delay") > 0) { - timer = setInterval(this.next.bind(this), this.get("delay")); + if (!this.get("__timer") && this.get("delay") > 0) { + this.set({__timer: setInterval(this.next.bind(this), this.get("delay"))}); } } } @@ -104,14 +109,14 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); - style.id = "svelte-3829970927-style"; - style.textContent = "\n [svelte-3829970927].multicarousel, [svelte-3829970927] .multicarousel {\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n }\n [svelte-3829970927].previous, [svelte-3829970927] .previous, [svelte-3829970927].next, [svelte-3829970927] .next {\n position: absolute;\n cursor: pointer;\n width: 30px;\n font-size: 20px;\n font-family: \"Arial Narrow\", Arial, sans-serif;\n font-weight: 900;\n color: #fff;\n text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n height: 100%;\n z-index: 1;\n transform: scaleY(3);\n }\n [svelte-3829970927].previous, [svelte-3829970927] .previous {\n left: 0;\n justify-content: flex-end;\n }\n [svelte-3829970927].next, [svelte-3829970927] .next {\n right: 0;\n justify-content: flex-start;\n }\n [svelte-3829970927].items, [svelte-3829970927] .items {\n white-space: nowrap;\n position: relative;\n }\n [svelte-3829970927].items > *, [svelte-3829970927] .items > * {\n display: none;\n }\n [svelte-3829970927].items > *.active, [svelte-3829970927] .items > *.active {\n display: inline-block;\n }\n"; + style.id = "svelte-4003507193-style"; + style.textContent = "\n [svelte-4003507193].multicarousel, [svelte-4003507193] .multicarousel {\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n }\n [svelte-4003507193].previous, [svelte-4003507193] .previous, [svelte-4003507193].next, [svelte-4003507193] .next {\n position: absolute;\n cursor: pointer;\n width: 30px;\n font-size: 20px;\n font-family: \"Arial Narrow\", Arial, sans-serif;\n font-weight: 900;\n color: #fff;\n text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n height: 100%;\n z-index: 1;\n transform: scaleY(3);\n }\n [svelte-4003507193].previous, [svelte-4003507193] .previous {\n left: 0;\n justify-content: flex-end;\n }\n [svelte-4003507193].next, [svelte-4003507193] .next {\n right: 0;\n justify-content: flex-start;\n }\n [svelte-4003507193].items, [svelte-4003507193] .items {\n white-space: nowrap;\n position: relative;\n }\n [svelte-4003507193].items > *, [svelte-4003507193] .items > * {\n display: none;\n }\n [svelte-4003507193].items > *.active, [svelte-4003507193] .items > *.active {\n display: inline-block;\n }\n"; appendNode( style, document.head ); } function create_main_fragment ( state, component ) { var div = createElement( 'div' ); - setAttribute( div, 'svelte-3829970927', '' ); + setAttribute( div, 'svelte-4003507193', '' ); div.className = "multicarousel"; component.refs.carousel = div; var div_1 = createElement( 'div' ); @@ -175,7 +180,7 @@ function MultiCarousel ( options ) { this._yield = options._yield; this._torndown = false; - if ( !document.getElementById( "svelte-3829970927-style" ) ) add_css(); + if ( !document.getElementById( "svelte-4003507193-style" ) ) add_css(); this._fragment = create_main_fragment( this._state, this ); if ( options.target ) this._fragment.mount( options.target, null ); diff --git a/package.json b/package.json index 04e630a..a8a8b44 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "multicarousel", - "version": "1.0.0", + "version": "1.0.1", "description": "A multiple item JavaScript carousel UI component written with Svelte.", "main": "lib/MultiCarousel.js", "devDependencies": { diff --git a/src/MultiCarousel.html b/src/MultiCarousel.html index 69a2094..266190e 100644 --- a/src/MultiCarousel.html +++ b/src/MultiCarousel.html @@ -9,26 +9,31 @@