({15:n}),({loaded:n})=>n?32768:0]},$$scope:{ctx:n}}}),z=new Ot({}),H=new ht({props:{$$slots:{default:[ue,({showPrevPage:n,showNextPage:t})=>({11:n,12:t}),({showPrevPage:n,showNextPage:t})=>(n?2048:0)|(t?4096:0)],next:[ce,({showPrevPage:n,showNextPage:t})=>({11:n,12:t}),({showPrevPage:n,showNextPage:t})=>(n?2048:0)|(t?4096:0)],prev:[re,({showPrevPage:n,showNextPage:t})=>({11:n,12:t}),({showPrevPage:n,showNextPage:t})=>(n?2048:0)|(t?4096:0)]},$$scope:{ctx:n}}}),Z=new Ot({}),Y=new ht({props:{$$slots:{default:[fe,({currentPageIndex:n,pagesCount:t,showPage:e})=>({1:n,2:t,3:e}),({currentPageIndex:n,pagesCount:t,showPage:e})=>(n?2:0)|(t?4:0)|(e?8:0)],dots:[ie,({currentPageIndex:n,pagesCount:t,showPage:e})=>({1:n,2:t,3:e}),({currentPageIndex:n,pagesCount:t,showPage:e})=>(n?2:0)|(t?4:0)|(e?8:0)]},$$scope:{ctx:n}}}),en=new Ot({}),ln=new Lt({}),fn=new Ot({}),$n=new Ot({}),An=new Ot({}),Hn=new Ot({}),wt=new Ot({}),he=new Ot({}),{c(){t=y("h1"),t.textContent="Features",e=w(),a=y("h2"),a.textContent="Single item",s=w(),an(r.$$.fragment),o=w(),c=y("pre"),u=w(),an(l.$$.fragment),i=w(),p=y("h2"),p.textContent="Multiple items",f=w(),an(d.$$.fragment),h=w(),g=y("pre"),v=w(),an(k.$$.fragment),m=w(),b=y("h2"),b.textContent="Autoplay",$=w(),an(q.$$.fragment),C=w(),P=y("pre"),E=w(),an(A.$$.fragment),T=w(),I=y("h2"),I.textContent="Lazy loading of images",L=w(),an(M.$$.fragment),O=w(),S=y("pre"),D=w(),an(z.$$.fragment),N=w(),R=y("h2"),R.textContent="Arrows customization",W=w(),an(H.$$.fragment),F=w(),U=y("pre"),B=w(),an(Z.$$.fragment),G=w(),K=y("h2"),K.textContent="Dots customization",V=w(),an(Y.$$.fragment),X=w(),nn=y("pre"),tn=w(),an(en.$$.fragment),on=w(),cn=y("h2"),cn.textContent="Use case",un=w(),an(ln.$$.fragment),pn=w(),an(fn.$$.fragment),dn=w(),hn=y("h1"),hn.textContent="Installation",gn=w(),vn=y("pre"),kn=w(),mn=y("pre"),_n=w(),xn=y("p"),xn.textContent="Import component",yn=w(),bn=y("pre"),wn=w(),an($n.$$.fragment),qn=w(),jn=y("h1"),jn.textContent="Props",Cn=w(),Pn=y("div"),Pn.innerHTML='Prop \nType \nDefault \nDescription arrowsbooleantrueEnable Next/Prev arrows infinitebooleantrueInfinite looping initialPageIndexnumber0Page to start on durationnumber500Transition duration (ms) autoplaybooleanfalseEnables auto play of pages autoplayDurationnumber3000Auto play change interval (ms) autoplayDirectionstring'next'Auto play change direction (next or prev) dotsbooleantrueCurrent page indicator dots pauseOnFocusbooleanfalsePause autoplay on focus timingFunctionstring'ease-in-out'CSS animation timing function
',En=w(),an(An.$$.fragment),Tn=w(),In=y("h1"),In.textContent="Events",Ln=w(),Mn=y("h2"),Mn.innerHTML="pageChange",On=w(),Sn=y("p"),Sn.textContent="Is dispatched on page change",Dn=w(),zn=y("div"),zn.innerHTML='Payload field \nType \nDescription event.detailnumberCurrent page index
',Nn=w(),Rn=y("pre"),Wn=w(),an(Hn.$$.fragment),Fn=w(),Un=y("h1"),Un.textContent="Slots",Bn=w(),Zn=y("h2"),Zn.innerHTML="prev and next",Gn=w(),Kn=y("p"),Kn.textContent="They are used for customizing prev and next buttons.",Vn=w(),Yn=y("p"),Yn.textContent="Slot props:",Xn=w(),Jn=y("div"),Jn.innerHTML='Prop \nType \nDescription showPrevPagefunctionCall it to switch to the previos page showNextPagefunctionCall it to switch to the next page
',Qn=w(),nt=y("pre"),tt=w(),et=y("h2"),et.innerHTML="dots",at=w(),st=y("p"),st.textContent="This slot is used for customizing dots appearance.",rt=w(),ot=y("p"),ot.textContent="Slot props:",ct=w(),ut=y("div"),ut.innerHTML='Prop \nType \nDescription currentPageIndexnumberRepresents current page index (start from 0) pagesCountnumberTotal pages amount showPagefunctionTakes index as page to be shown
',lt=w(),it=y("pre"),pt=w(),ft=y("h2"),ft.textContent="Default slot",dt=w(),gt=y("p"),gt.textContent="This slot takes content for the carousel.",vt=w(),kt=y("p"),kt.textContent="Slot props:",mt=w(),_t=y("div"),_t.innerHTML='Prop \nType \nDescription loadednumber[]Contains indexes of pages to be loaded. Can be used for lazy loading
',xt=w(),yt=y("pre"),bt=w(),an(wt.$$.fragment),$t=w(),qt=y("h1"),qt.textContent="Methods",jt=w(),Ct=y("h2"),Ct.innerHTML="goTo",Pt=w(),Et=y("p"),Et.textContent="Navigates to a page by index",At=w(),Tt=y("p"),Tt.textContent="Arguments:",It=w(),Mt=y("div"),Mt.innerHTML='Argument \nType \nDefault \nDescription pageIndexnumberPage number options.animatedbooleantrueShould it be animated or not
',St=w(),Dt=y("pre"),zt=w(),Nt=y("h2"),Nt.innerHTML="goToPrev",Rt=w(),Wt=y("p"),Wt.textContent="Navigates to the previous page",Ht=w(),Ft=y("p"),Ft.textContent="Arguments:",Ut=w(),Bt=y("div"),Bt.innerHTML='Argument \nType \nDefault \nDescription options.animatedbooleantrueShould it be animated or not
',Zt=w(),Gt=y("pre"),Kt=w(),Vt=y("h2"),Vt.innerHTML="goToNext",Xt=w(),Jt=y("p"),Jt.textContent="Navigates to the next page",ne=w(),ee=y("p"),ee.textContent="Arguments:",ae=w(),oe=y("div"),oe.innerHTML='Argument \nType \nDefault \nDescription options.animatedbooleantrueShould it be animated or not
',le=w(),pe=y("pre"),de=w(),an(he.$$.fragment),j(c,"class","language-jsx"),j(g,"class","language-jsx"),j(P,"class","language-jsx"),j(S,"class","language-jsx"),j(U,"class","language-jsx"),j(nn,"class","language-jsx"),j(vn,"class","language-bash"),j(mn,"class","language-bash"),j(bn,"class","language-jsx"),j(Pn,"class","table-wrapper svelte-14lrqxf"),j(zn,"class","table-wrapper svelte-14lrqxf"),j(Rn,"class","language-jsx"),j(Jn,"class","table-wrapper svelte-14lrqxf"),j(nt,"class","language-jsx"),j(ut,"class","table-wrapper svelte-14lrqxf"),j(it,"class","language-jsx"),j(_t,"class","table-wrapper svelte-14lrqxf"),j(yt,"class","language-jsx"),j(Mt,"class","table-wrapper svelte-14lrqxf"),j(Dt,"class","language-jsx"),j(Bt,"class","table-wrapper svelte-14lrqxf"),j(Gt,"class","language-jsx"),j(oe,"class","table-wrapper svelte-14lrqxf"),j(pe,"class","language-jsx")},m(n,x){_(n,t,x),_(n,e,x),_(n,a,x),_(n,s,x),sn(r,n,x),_(n,o,x),_(n,c,x),c.innerHTML='< Carousel > \n { #each colors as { color, text } ( color) } \n <Color { color} { text} />\n { / each} \n </ Carousel > < Carousel > \n { #each _. chunk ( colors, 3 ) as colorsChunk, chunkIndex ( chunkIndex) } \n < divstyle = " display: flex;" > \n { #each colorsChunk as { color, text } ( color) } \n <Color { color} { text} />\n { / each} \n </ div> \n { / each} \n </ Carousel > < Carousel autoplay = { true } autoplayDuration = { 2000 } > \n { #each colors as { color, text } ( color) } \n <Color { color} { text} />\n { / each} \n </ Carousel > < Carousel let: loaded> \n { #each images as src, imageIndex ( src) } \n < divclass = " img-container" > \n { #if loaded. includes ( imageIndex) } \n <img { src} alt="nature" />\n { / if } \n </ div> \n { / each} \n </ Carousel > < Carousel let: showPrevPagelet: showNextPage> \n < divslot = " prev" on: click= { showPrevPage} class = " custom-arrow custom-arrow-prev" > \n < i/> \n </ div> \n { #each colors as { color, text } ( color) } \n <Color { color} { text} />\n { / each} \n < divslot = " next" on: click= { showNextPage} class = " custom-arrow custom-arrow-next" > \n < i/> \n </ div> \n </ Carousel > < Carousel let: currentPageIndexlet: pagesCountlet: showPage> \n < divslot = " dots" class = " custom-dots" > \n { #each Array ( pagesCount) as _, pageIndex ( pageIndex) } \n < CustomDot symbol = { pageIndex + 1 } active = { currentPageIndex === pageIndex} on: click= { ( ) => showPage ( pageIndex) } > </ CustomDot > \n { / each} \n </ div> \n { #each colors as { color, text } ( color) } \n <Color { color} { text} />\n { / each} \n </ Carousel > yarn add svelte-carouselnpm install svelte-carousel< script> \n import Carousel from \'svelte-carousel\'\n // ...\n </ script> < Carousel on: pageChange= { \n event => console. log ( ` Current page index: ${ event. detail} ` ) \n } > \n <!-- --\x3e\n </ Carousel > < Carousel let: showPrevPagelet: showNextPage> \n < divslot = " prev" > \n <!-- --\x3e\n </ div> \n < divslot = " next" > \n <!-- --\x3e\n </ div> \n <!-- --\x3e\n </ Carousel > < Carousel let: currentPageIndexlet: pagesCountlet: showPage> \n < divslot = " dots" > \n <!-- --\x3e\n </ div> \n <!-- --\x3e\n </ Carousel > < Carousel let: loaded> \n < div> \n <!-- --\x3e\n </ div> \n <!-- --\x3e\n </ Carousel > < script> \n // ...\n let carousel;\n function goToStartPage() {\n carousel.goTo(0, { animated: false })\n }\n </ script> < Carousel bind: this= { carousel} > \n <!-- --\x3e\n </ Carousel > < buttonclass = " button" on: click= { goToStartPage} > Go </ button> < script> \n // ...\n let carousel;\n function goToPrevPage() {\n carousel.goToPrev({ animated: false })\n }\n </ script> < Carousel bind: this= { carousel} > \n <!-- --\x3e\n </ Carousel > < buttonclass = " button" on: click= { goToPrevPage} > Go </ button> < script> \n // ...\n let carousel;\n function goToNextPage() {\n carousel.goToNext({ animated: false })\n }\n </ script> < Carousel bind: this= { carousel} > \n <!-- --\x3e\n </ Carousel > < buttonclass = " button" on: click= { goToNextPage} > Go </ button>
+
+ {#each colors as { color, text } (color)}
+
+ {/each}
+
+
+
+
carousel.goTo
+
+
Go
+
+
+
carousel.goToPrev
+
Go
+
+
+
carousel.goToNext
+
Go
+
+
+
| Prop | Type | Default | Description |
@@ -220,7 +225,9 @@ Import component
-# Event
+
+
+| Argument | Type | Default | Description |
+|--------------------|-------------|---------|---------------------------------------|
+| `pageIndex` | `number` | | Page number |
+| `options.animated` | `boolean` | `true` | Should it be animated or not |
+
+
+
+```jsx
+
+
+
+
+
+Go
+```
+
+## `goToPrev`
+Navigates to the previous page
+
+Arguments:
+
+
+
+| Argument | Type | Default | Description |
+|--------------------|-------------|---------|---------------------------------------|
+| `options.animated` | `boolean` | `true` | Should it be animated or not |
+
+
+
+```jsx
+
+
+
+
+
+Go
+```
+
+## `goToNext`
+Navigates to the next page
+
+Arguments:
+
+
+
+| Argument | Type | Default | Description |
+|--------------------|-------------|---------|---------------------------------------|
+| `options.animated` | `boolean` | `true` | Should it be animated or not |
+
+
+
+```jsx
+
+
+
+
+
+Go
+```
+
+