1"use strict";(self.webpackChunk_splidejs_splide_site=self.webpackChunk_splidejs_splide_site||[]).push([[8645],{606:function(e,l,_){_.r(l),_.d(l,{Head:function(){return S},default:function(){return z}});var c=_(1151),s=_(7294);function o(e){const l=Object.assign({h2:"h2",a:"a",div:"div",p:"p",code:"code"},(0,c.ah)(),e.components),{Example:_,Box:o}=l;return o||t("Box",!0),_||t("Example",!0),s.createElement(s.Fragment,null,s.createElement(l.h2,{id:"progress-bar",style:{position:"relative"}},s.createElement(l.a,{href:"#progress-bar","aria-label":"progress bar permalink",className:"anchor before"},s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="m12.4 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m26 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m4.23 23.8-0.695 6h30.7l0.695-6z"/><path d="m5.8 10.2-0.695 6h30.7l0.695-6z"/></svg>'}})),"Progress Bar"),"\n",s.createElement(_,{id:"autoplay",sourceId:"autoplay",hasCode:!1}),"\n",s.createElement(l.p,null,"To display the progress bar, provide the following HTML.\nMake sure that the ",s.createElement(l.code,null,"progress")," element must be a child of the root or ",s.createElement(l.a,{href:"/v3/guides/structure/"},"the slider")," element."),"\n",s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<div class="ryuseilight-wrapper ryusei">\n <pre class="ryuseilight ryuseilight--html"><div class="rl__container has-top-overlay"><div class="rl__body"><div class="rl__code"><div class="rl__line"><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">div</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">div</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__track"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">ul</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__list"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">li</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slide"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__text">Slide</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">01</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">li</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">li</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slide"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__text">Slide</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">02</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">li</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">li</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slide"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__text">Slide</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">03</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">li</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">ul</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">div</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__lb">\n</code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">div</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__progress"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line is-active"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">div</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__progress__bar"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line is-active"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">div</code><code class="rl__token rl__bracket">></code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">div</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">div</code><code class="rl__token rl__bracket">></code></div></div></div><div class="rl__overlay rl__overlay--top-right"><span class="rl__name">HTML</span><span class="rl__tools"><button type="button" class="rl__button rl__copy" aria-label="Copy code to clipboard"><span class="rl__button__label rl__button__label--inactive"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n <path d="m10.3 1.26c-1.11 0-2.09 0.593-2.64 1.47h-1.41c-1.77 0-3.23 1.46-3.23 3.23v13.5c0 1.77 1.46 3.23 3.23 3.23h11.5c1.77 0 3.23-1.46 3.23-3.23v-13.5c0-1.77-1.46-3.23-3.23-3.23h-1.41c-0.552-0.882-1.53-1.47-2.64-1.47zm0 2.24h3.44c0.501 0 0.869 0.37 0.869 0.871s-0.368 0.869-0.869 0.869h-3.44c-0.501 0-0.869-0.368-0.869-0.869s0.368-0.871 0.869-0.871zm-4.05 1.38h0.98c0.249 1.46 1.54 2.6 3.07 2.6h3.44c1.53 0 2.82-1.13 3.07-2.6h0.982c0.616 0 1.08 0.462 1.08 1.08v13.5c0 0.616-0.462 1.08-1.08 1.08h-11.5c-0.616 0-1.08-0.462-1.08-1.08v-13.5c0-0.616 0.462-1.08 1.08-1.08zm2.59 5.61a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 4.04a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1z" />\n</svg>\n</span><span class="rl__button__label rl__button__label--active"><svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
1\n <path fill="currentColor" d="m33.4 5.54-17.6 17.6-9.09-9.09-5.66 5.66 14.8 14.8 5.66-5.66-0.0156-0.0156 17.6-17.6-5.66-5.66z"/>\n</svg>\n</span></button></span></div></div></pre>\n <pre class="ryuseilight-raw" hidden><div class="splide">\n <div class="splide__track">\n\t\t<ul class="splide__list">\n\t\t\t<li class="splide__slide">Slide 01</li>\n\t\t\t<li class="splide__slide">Slide 02</li>\n\t\t\t<li class="splide__slide">Slide 03</li>\n\t\t</ul>\n </div>\n\n\n <div class="splide__progress">\n\t\t<div class="splide__progress__bar">\n\t\t</div>\n </div>\n</div></pre>\n </div>'}}),"\n",s.createElement(l.p,null,"If you are using ",s.createElement(l.code,null,"splide-core.min.css"),", you have to style the bar to make it visible:"),"\n",s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<div class="ryuseilight-wrapper ryusei">\n <pre class="ryuseilight ryuseilight--css"><div class="rl__container has-top-overlay"><div class="rl__body"><div class="rl__code"><div class="rl__line"><code class="rl__token rl__selector">.splide__progress__bar</code><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket">{</code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__prop">height</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">3</code><code class="rl__token rl__text">px</code><code class="rl__token rl__delimiter">;</code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__prop">background</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">#ccc</code><code class="rl__token rl__delimiter">;</code></div><div class="rl__line"><code class="rl__token rl__bracket">}</code></div></div></div><div class="rl__overlay rl__overlay--top-right"><span class="rl__name">CSS</span><span class="rl__tools"><button type="button" class="rl__button rl__copy" aria-label="Copy code to clipboard"><span class="rl__button__label rl__button__label--inactive"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n <path d="m10.3 1.26c-1.11 0-2.09 0.593-2.64 1.47h-1.41c-1.77 0-3.23 1.46-3.23 3.23v13.5c0 1.77 1.46 3.23 3.23 3.23h11.5c1.77 0 3.23-1.46 3.23-3.23v-13.5c0-1.77-1.46-3.23-3.23-3.23h-1.41c-0.552-0.882-1.53-1.47-2.64-1.47zm0 2.24h3.44c0.501 0 0.869 0.37 0.869 0.871s-0.368 0.869-0.869 0.869h-3.44c-0.501 0-0.869-0.368-0.869-0.869s0.368-0.871 0.869-0.871zm-4.05 1.38h0.98c0.249 1.46 1.54 2.6 3.07 2.6h3.44c1.53 0 2.82-1.13 3.07-2.6h0.982c0.616 0 1.08 0.462 1.08 1.08v13.5c0 0.616-0.462 1.08-1.08 1.08h-11.5c-0.616 0-1.08-0.462-1.08-1.08v-13.5c0-0.616 0.462-1.08 1.08-1.08zm2.59 5.61a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 4.04a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1z" />\n</svg>\n</span><span class="rl__button__label rl__button__label--active"><svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">\n <path fill="currentColor" d="m33.4 5.54-17.6 17.6-9.09-9.09-5.66 5.66 14.8 14.8 5.66-5.66-0.0156-0.0156 17.6-17.6-5.66-5.66z"/>\n</svg>\n</span></button></span></div></div></pre>\n <pre class="ryuseilight-raw" hidden>.splide__progress__bar {\n height: 3px;\n background: #ccc;\n}</pre>\n </div>'}}),"\n",s.createElement(o,{type:"info"},s.createElement(l.p,null,"By default, Splide rewinds the progress once it's interrupted.\nYou can keep the elapsed time by setting the ",s.createElement("code",null,"resetProgress")," option to ",s.createElement("code",null,"false"),".")),"\n",s.createElement(l.h2,{id:"overriding-interval",style:{position:"relative"}},s.createElement(l.a,{href:"#overriding-interval","aria-label":"overriding interval permalink",className:"anchor before"},s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="m12.4 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m26 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m4.23 23.8-0.695 6h30.7l0.695-6z"/><path d="m5.8 10.2-0.695 6h30.7l0.695-6z"/></svg>'}})),"Overriding Interval"),"\n",s.createElement(l.p,null,"The ",s.createElement(l.code,null,"interval")," option uniformly defines the autoplay interval,\nbut you can override it on specific slides by the ",s.createElement(l.code,null,"data-splide-interval")," attribute:"),"\n",s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<div class="ryuseilight-wrapper ryusei">\n <pre class="ryuseilight ryuseilight--html"><div class="rl__container has-top-overlay"><div class="rl__body"><div class="rl__code"><div class="rl__line"><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">li</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slide"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">data-splide-interval</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"1000"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">li</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">li</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slide"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">data-splide-interval</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"10000"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">li</code><code class="rl__token rl__bracket">></code></div></div></div><div class="rl__overlay rl__overlay--top-right"><span class="rl__name">HTML</span><span class="rl__tools"><button type="button" class="rl__button rl__copy" aria-label="Copy code to clipboard"><span class="rl__button__label rl__button__label--inactive"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n <path d="m10.3 1.26c-1.11 0-2.09 0.593-2.64 1.47h-1.41c-1.77 0-3.23 1.46-3.23 3.23v13.5c0 1.77 1.46 3.23 3.23 3.23h11.5c1.77 0 3.23-1.46 3.23-3.23v-13.5c0-1.77-1.46-3.23-3.23-3.23h-1.41c-0.552-0.882-1.53-1.47-2.64-1.47zm0 2.24h3.44c0.501 0 0.869 0.37 0.869 0.871s-0.368 0.869-0.869 0.869h-3.44c-0.501 0-0.869-0.368-0.869-0.869s0.368-0.871 0.869-0.871zm-4.05 1.38h0.98c0.249 1.46 1.54 2.6 3.07 2.6h3.44c1.53 0 2.82-1.13 3.07-2.6h0.982c0.616 0 1.08 0.462 1.08 1.08v13.5c0 0.616-0.462 1.08-1.08 1.08h-11.5c-0.616 0-1.08-0.462-1.08-1.08v-13.5c0-0.616 0.462-1.08 1.08-1.08zm2.59 5.61a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 4.04a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1z" />\n</svg>\n</span><span class="rl__button__label rl__button__label--active"><svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
1\n <path fill="currentColor" d="m33.4 5.54-17.6 17.6-9.09-9.09-5.66 5.66 14.8 14.8 5.66-5.66-0.0156-0.0156 17.6-17.6-5.66-5.66z"/>\n</svg>\n</span></button></span></div></div></pre>\n <pre class="ryuseilight-raw" hidden><li class="splide__slide" data-splide-interval="1000"></li>\n<li class="splide__slide" data-splide-interval="10000"></li></pre>\n </div>'}}),"\n",s.createElement(l.h2,{id:"progress-rate",style:{position:"relative"}},s.createElement(l.a,{href:"#progress-rate","aria-label":"progress rate permalink",className:"anchor before"},s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="m12.4 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m26 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m4.23 23.8-0.695 6h30.7l0.695-6z"/><path d="m5.8 10.2-0.695 6h30.7l0.695-6z"/></svg>'}})),"Progress Rate"),"\n",s.createElement(l.p,null,"The ",s.createElement(l.a,{href:"/v3/guides/events/#autoplayplaying"},s.createElement(l.code,null,"autoplay:playing"))," lets you know the current progress rate."),"\n",s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<div class="ryuseilight-wrapper ryusei">\n <pre class="ryuseilight ryuseilight--javascript"><div class="rl__container has-top-overlay"><div class="rl__body"><div class="rl__code"><div class="rl__line"><code class="rl__token rl__keyword">var</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">splide</code><code class="rl__token rl__space"> </code><code class="rl__token rl__operator">=</code><code class="rl__token rl__space"> </code><code class="rl__token rl__keyword">new</code><code class="rl__token rl__space"> </code><code class="rl__token rl__class">Splide</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'.splide\'</code><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket">)</code><code class="rl__token rl__delimiter">;</code></div><div class="rl__line"><code class="rl__token rl__lb">\n</code></div><div class="rl__line"><code class="rl__token rl__identifier">splide</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">on</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'autoplay:playing\'</code><code class="rl__token rl__delimiter">,</code><code class="rl__token rl__space"> </code><code class="rl__token rl__keyword">function</code><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">rate</code><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket">)</code><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket">{</code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">console</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">log</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">rate</code><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket">)</code><code class="rl__token rl__delimiter">;</code><code class="rl__token rl__space"> </code><code class="rl__token rl__comment">// 0-1</code></div><div class="rl__line"><code class="rl__token rl__bracket">}</code><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket">)</code><code class="rl__token rl__delimiter">;</code></div><div class="rl__line"><code class="rl__token rl__lb">\n</code></div><div class="rl__line"><code class="rl__token rl__identifier">splide</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">mount</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__bracket">)</code><code class="rl__token rl__delimiter">;</code></div></div></div><div class="rl__overlay rl__overlay--top-right"><span class="rl__name">JavaScript</span><span class="rl__tools"><button type="button" class="rl__button rl__copy" aria-label="Copy code to clipboard"><span class="rl__button__label rl__button__label--inactive"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n <path d="m10.3 1.26c-1.11 0-2.09 0.593-2.64 1.47h-1.41c-1.77 0-3.23 1.46-3.23 3.23v13.5c0 1.77 1.46 3.23 3.23 3.23h11.5c1.77 0 3.23-1.46 3.23-3.23v-13.5c0-1.77-1.46-3.23-3.23-3.23h-1.41c-0.552-0.882-1.53-1.47-2.64-1.47zm0 2.24h3.44c0.501 0 0.869 0.37 0.869 0.871s-0.368 0.869-0.869 0.869h-3.44c-0.501 0-0.869-0.368-0.869-0.869s0.368-0.871 0.869-0.871zm-4.05 1.38h0.98c0.249 1.46 1.54 2.6 3.07 2.6h3.44c1.53 0 2.82-1.13 3.07-2.6h0.982c0.616 0 1.08 0.462 1.08 1.08v13.5c0 0.616-0.462 1.08-1.08 1.08h-11.5c-0.616 0-1.08-0.462-1.08-1.08v-13.5c0-0.616 0.462-1.08 1.08-1.08zm2.59 5.61a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 4.04a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1z" />\n</svg>\n</span><span class="rl__button__label rl__button__label--active"><svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
1\n <path fill="currentColor" d="m33.4 5.54-17.6 17.6-9.09-9.09-5.66 5.66 14.8 14.8 5.66-5.66-0.0156-0.0156 17.6-17.6-5.66-5.66z"/>\n</svg>\n</span></button></span></div></div></pre>\n <pre class="ryuseilight-raw" hidden>var splide = new Splide( \'.splide\' );\n\n\nsplide.on( \'autoplay:playing\', function ( rate ) {\n console.log( rate ); // 0-1\n} );\n\n\nsplide.mount();</pre>\n </div>'}}),"\n",s.createElement(l.h2,{id:"playpause-buttons",style:{position:"relative"}},s.createElement(l.a,{href:"#playpause-buttons","aria-label":"playpause buttons permalink",className:"anchor before"},s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="m12.4 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m26 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m4.23 23.8-0.695 6h30.7l0.695-6z"/><path d="m5.8 10.2-0.695 6h30.7l0.695-6z"/></svg>'}})),"Play/Pause Buttons"),"\n",s.createElement(l.p,null,"To add play/pause buttons, provide the following HTML."),"\n",s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<div class="ryuseilight-wrapper ryusei">\n <pre class="ryuseilight ryuseilight--html"><div class="rl__container has-top-overlay"><div class="rl__body"><div class="rl__code"><div class="rl__line"><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">div</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">div</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slider"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">div</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__track"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">ul</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__list"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">li</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slide"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__text">Slide</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">01</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">li</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">li</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slide"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__text">Slide</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">02</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">li</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">li</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__slide"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__text">Slide</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">03</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">li</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">ul</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">div</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">div</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__lb">\n</code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">div</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__autoplay"</code><code class="rl__token rl__bracket">></code></div><div class="rl__line is-active"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">button</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__play"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__text">Play</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">button</code><code class="rl__token rl__bracket">></code></div><div class="rl__line is-active"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__tag">button</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">class</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"splide__pause"</code><code class="rl__token rl__bracket">></code><code class="rl__token rl__text">Pause</code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">button</code><code class="rl__token rl__bracket">></code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">div</code><code class="rl__token rl__bracket">></code></div><div class="rl__line"><code class="rl__token rl__bracket"><</code><code class="rl__token rl__delimiter">/</code><code class="rl__token rl__tag rl__tag--close">div</code><code class="rl__token rl__bracket">></code></div></div></div><div class="rl__overlay rl__overlay--top-right"><span class="rl__name">HTML</span><span class="rl__tools"><button type="button" class="rl__button rl__copy" aria-label="Copy code to clipboard"><span class="rl__button__label rl__button__label--inactive"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n <path d="m10.3 1.26c-1.11 0-2.09 0.593-2.64 1.47h-1.41c-1.77 0-3.23 1.46-3.23 3.23v13.5c0 1.77 1.46 3.23 3.23 3.23h11.5c1.77 0 3.23-1.46 3.23-3.23v-13.5c0-1.77-1.46-3.23-3.23-3.23h-1.41c-0.552-0.882-1.53-1.47-2.64-1.47zm0 2.24h3.44c0.501 0 0.869 0.37 0.869 0.871s-0.368 0.869-0.869 0.869h-3.44c-0.501 0-0.869-0.368-0.869-0.869s0.368-0.871 0.869-0.871zm-4.05 1.38h0.98c0.249 1.46 1.54 2.6 3.07 2.6h3.44c1.53 0 2.82-1.13 3.07-2.6h0.982c0.616 0 1.08 0.462 1.08 1.08v13.5c0 0.616-0.462 1.08-1.08 1.08h-11.5c-0.616 0-1.08-0.462-1.08-1.08v-13.5c0-0.616 0.462-1.08 1.08-1.08zm2.59 5.61a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 4.04a1 1 0 0 0-1 1 1 1 0 0 0 1 1h6.35a1 1 0 0 0 1-1 1 1 0 0 0-1-1z" />\n</svg>\n</span><span class="rl__button__label rl__button__label--active"><svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
1\n <path fill="currentColor" d="m33.4 5.54-17.6 17.6-9.09-9.09-5.66 5.66 14.8 14.8 5.66-5.66-0.0156-0.0156 17.6-17.6-5.66-5.66z"/>\n</svg>\n</span></button></span></div></div></pre>\n <pre class="ryuseilight-raw" hidden><div class="splide">\n <div class="splide__slider">\n\t\t<div class="splide__track">\n\t\t\t<ul class="splide__list">\n\t\t\t\t<li class="splide__slide">Slide 01</li>\n\t\t\t\t<li class="splide__slide">Slide 02</li>\n\t\t\t\t<li class="splide__slide">Slide 03</li>\n\t\t\t</ul>\n\t\t</div>\n </div>\n\n\n <div class="splide__autoplay">\n\t\t<button class="splide__play">Play</button>\n\t\t<button class="splide__pause">Pause</button>\n </div>\n</div></pre>\n </div>'}}),"\n",s.createElement(l.p,null,"The ",s.createElement(l.code,null,"autoplay")," element also have to be a child of the root or ",s.createElement(l.a,{href:"/v3/guides/structure/"},"the slider")," element."),"\n",s.createElement(o,{type:"caution"},s.createElement(l.p,null,"The ",s.createElement("code",null,"pauseOnHover")," option should be ",s.createElement("code",null,"false")," if the slider has a pause button\nsince autoplay will stop before the user clicks the button.")),"\n",s.createElement(l.h2,{id:"viewport",style:{position:"relative"}},s.createElement(l.a,{href:"#viewport","aria-label":"viewport permalink",className:"anchor before"},s.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="m12.4 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m26 0.842-4.44 38.3h6l4.44-38.3z"/><path d="m4.23 23.8-0.695 6h30.7l0.695-6z"/><path d="m5.8 10.2-0.695 6h30.7l0.695-6z"/></svg>'}})),"Viewport"),"\n",s.createElement(l.p,null,"You can start autoplay only when the slider is in the viewport by using ",s.createElement(l.a,{href:"/v3/extensions/intersection"},"Intersection extension"),"."))}var r=function(e){void 0===e&&(e={});const{wrapper:l}=Object.assign({},(0,c.ah)(),e.components);return l?s.createElement(l,e,s.createElement(o,e)):o(e)};function t(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var a=_(1597),d=_(943),n=_(8388),i=_(382),k=_(1534),p=_(9324),v=_(6737),m=_(6193),h=_(1101),u=_(6262),b=_(7176),g=_(2637),y=_(447),w=_(7736),f=_(1632);const x={Box:p.x,Button:k.z,Link:a.Link,Params:v.S,Type:n.D,LinkTable:m.W,LinkTo:h.e,Example:i.e,Icon:u.J,ParamTable:b.m,Accessor:g.U,Key:y.s,VideoPlayer:w.Y};function E(e){let{data:l,pageContext:_,children:o}=e;const r=l.mdx;return s.createElement(d.Z,{heading:r.frontmatter.title,localizedHeading:r.frontmatter.localizedTitle,desc:r.frontmatter.desc,pageContext:_,isDocument:!0},s.createElement(c.Zo,{components:x},o))}function z(e){return s.createElement(E,e,s.createElement(r,e))}function S(e){let{data:l}=e;const{frontmatter:_}=l.mdx;return s.createElement(f.H,{title:_.localizedTitle||_.title,description:_.desc,isArticle:!0})}}}]); 2//# sourceMappingURL=component---src-templates-document-js-content-file-path-home-runner-work-splide-site-splide-site-docs-v-3-guides-autoplay-index-mdx-16863b5821984eacc503.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.