1"use strict";(self.webpackChunk_splidejs_splide_site=self.webpackChunk_splidejs_splide_site||[]).push([[5616],{3695:function(e,l,_){_.r(l),_.d(l,{Head:function(){return S},default:function(){return z}});var c=_(1151),o=_(7294);function s(e){const l=Object.assign({h2:"h2",a:"a",div:"div",p:"p",code:"code",ul:"ul",li:"li",strong:"strong"},(0,c.ah)(),e.components),{Example:_,Box:s}=l;return s||d("Box",!0),_||d("Example",!0),o.createElement(o.Fragment,null,o.createElement(l.h2,{id:"introduction",style:{position:"relative"}},o.createElement(l.a,{href:"#introduction","aria-label":"introduction permalink",className:"anchor before"},o.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>'}})),"Introduction"),"\n",o.createElement(l.p,null,"A slider can sync with another slider by ",o.createElement(l.code,null,"sync()")," method,\nand ",o.createElement(l.code,null,"isNaviation")," option makes the slider clickable for navigation.\nBy using these 2 features, we can make a slider with a thumbnail control like this:"),"\n",o.createElement(_,{id:"thumbnail-navigation",sourceId:"thumbnail-navigation",hasCode:!1}),"\n",o.createElement(l.p,null,"This page explains how to create this kind of slider."),"\n",o.createElement(l.h2,{id:"thumbnail-slider",style:{position:"relative"}},o.createElement(l.a,{href:"#thumbnail-slider","aria-label":"thumbnail slider permalink",className:"anchor before"},o.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>'}})),"Thumbnail Slider"),"\n",o.createElement(l.p,null,"Let's start with the thumbnail slider."),"\n",o.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">id</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"thumbnail-slider"</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></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">img</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">src</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"thumbnail01.jpg"</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">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></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">img</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">src</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"thumbnail02.jpg"</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">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></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">img</code><code class="rl__token rl__space"> </code><code class="rl__token rl__attr">src</code><code class="rl__token rl__delimiter">=</code><code class="rl__token rl__value">"thumbnail03.jpg"</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">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__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 id="thumbnail-slider" class="splide">\n <div class="splide__track">\n\t\t<ul class="splide__list">\n\t\t\t<li class="splide__slide">\n\t\t\t\t<img src="thumbnail01.jpg">\n\t\t\t</li>\n\t\t\t<li class="splide__slide">\n\t\t\t\t<img src="thumbnail02.jpg">\n\t\t\t</li>\n\t\t\t<li class="splide__slide">\n\t\t\t\t<img src="thumbnail03.jpg">\n\t\t\t</li>\n\t\t</ul>\n </div>\n</div></pre>\n </div>'}}),"\n",o.createElement(l.p,null,"The thumbnail slider have to display multiple slides in a page.\nNormally, we use the ",o.createElement(l.code,null,"perPage")," option to define the number of slides,\nbut it's hard to determine the number from the perspective of responsibility even if using breakpoints."),"\n",o.createElement(l.p,null,"To solve this problem, let's use ",o.createElement(l.code,null,"fixedWidth")," option to fix the slide width against the window size."),"\n",o.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__identifier">document</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">addEventListener</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'DOMContentLoaded\'</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__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__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">\'#thumbnail-slider\'</code><code class="rl__token rl__delimiter">,</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">\t\t</code><code class="rl__token rl__identifier">fixedWidth</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">100</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__identifier">gap</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__number">10</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__identifier">rewind</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__boolean">true</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__identifier">pagination</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__boolean">false</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__bracket">}</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__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 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></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>document.addEventListener( \'DOMContentLoaded\', function () {\n new Splide( \'#thumbnail-slider\', {\n\t\tfixedWidth: 100,\n\t\tgap : 10,\n\t\trewind : true,\n\t\tpagination: false,\n } ).mount();\n} );</pre>\n </div>'}}),"\n",o.createElement(l.p,null,"And then, we need to fit the thumbnail to the slide size.\nWe have 2 options to do this, one is adding CSS, and another is using the ",o.createElement(l.code,null,"cover")," and ",o.createElement(l.code,null,"fixedHeight")," options."),"\n",o.createElement(l.p,null,"If all thumbnails have the same aspect ratio, the CSS way will work well:"),"\n",o.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__slide</code><code class="rl__token rl__space"> </code><code class="rl__token rl__tag">img</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">width</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">100</code><code class="rl__token rl__text">%</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">height</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">auto</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__slide img {\n width: 100%;\n height: auto;\n}</pre>\n </div>'}}
1),"\n",o.createElement(l.p,null,"If not, let's use the ",o.createElement(l.code,null,"cover")," way:"),"\n",o.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__identifier">document</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">addEventListener</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'DOMContentLoaded\'</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__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__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">\'#thumbnail-slider\'</code><code class="rl__token rl__delimiter">,</code><code class="rl__token rl__space"> </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__identifier">fixedWidth</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__number">100</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__identifier">fixedHeight</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">60</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__identifier">gap</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__number">10</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__identifier">rewind</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__boolean">true</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line"><code class="rl__token rl__space">\t\t</code><code class="rl__token rl__identifier">pagination</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__boolean">false</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">cover</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__boolean">true</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__bracket">}</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__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 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></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>document.addEventListener( \'DOMContentLoaded\', function () {\n new Splide( \'#thumbnail-slider\', {\n\t\tfixedWidth : 100,\n fixedHeight: 60,\n\t\tgap : 10,\n\t\trewind : true,\n\t\tpagination : false,\n cover : true,\n } ).mount();\n} );</pre>\n </div>'}}),"\n",o.createElement(l.p,null,"Now the slider will be like this:"),"\n",o.createElement(_,{id:"thumbnails-incomplete",images:!0,options:{fixedWidth:100,fixedHeight:60,gap:10,rewind:!0,pagination:!1,cover:!0}}),"\n",o.createElement(l.p,null,"It looks pretty good for the thumbnail slider, but there are a few things to do:"),"\n",o.createElement(l.ul,null,"\n",o.createElement(l.li,null,"The user cannot tell which slide is selected"),"\n",o.createElement(l.li,null,o.createElement(l.code,null,"100px")," is probably big for mobile devices"),"\n",o.createElement(l.li,null,"The active slide should be on the center if possible"),"\n"),"\n",o.createElement(l.p,null,"If you are using the theme CSS, such as ",o.createElement(l.code,null,"splide.min.css")," or ",o.createElement(l.code,null,"splide-skyblue.min.css"),",\nit emphasizes the active slide by adding a border style.\nOtherwise, you have to style it manually by the ",o.createElement(l.code,null,"is-active")," status class:"),"\n",o.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__slide</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">opacity</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">0.3</code><code class="rl__token rl__delimiter">;</code></div><div class="rl__line"><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"><code class="rl__token rl__selector">.splide__slide.is-active</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">opacity</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">1</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__slide {\n opacity: 0.3;\n}\n\n\n.splide__slide.is-active {\n opacity: 1;\n}</pre>\n </div>'}}),"\n",o.createElement(l.p,null,"The ",o.createElement(l.code,null,"breakpoints")," and ",o.createElement(l.code,null,"focus")," options helps us to deal with the second and third problems.\nNote that ",o.createElement(l.code,null,"fixedHeight")," is not necessary if you are not using the ",o.
1createElement(l.code,null,"cover")," option."),"\n",o.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">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">\'#thumbnail-slider\'</code><code class="rl__token rl__delimiter">,</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">fixedWidth</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__number">100</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__identifier">fixedHeight</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">60</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__identifier">gap</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__number">10</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__identifier">rewind</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__boolean">true</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__identifier">pagination</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__boolean">false</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__identifier">cover</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__boolean">true</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">focus</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__string">\'center\'</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">breakpoints</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </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__number">600</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </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__identifier">fixedWidth</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__number">60</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">
1fixedHeight</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">44</code><code class="rl__token rl__delimiter">,</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></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></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><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">\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>new Splide( \'#thumbnail-slider\', {\n fixedWidth : 100,\n fixedHeight: 60,\n gap : 10,\n rewind : true,\n pagination : false,\n cover : true,\n focus : \'center\',\n breakpoints: {\n 600: {\n fixedWidth : 60,\n fixedHeight: 44,\n },\n },\n} ).mount();</pre>\n </div>'}}),"\n",o.createElement(l.p,null,"Next, we need to make slides clickable by setting the ",o.createElement(l.code,null,"isNavigation")," option to ",o.createElement(l.code,null,"true"),":"),"\n",o.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">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">\'#thumbnail-slider\'</code><code class="rl__token rl__delimiter">,</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">fixedWidth</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__number">100</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__identifier">fixedHeight</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__number">60</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__identifier">gap</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__number">10</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__identifier">rewind</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__boolean">true</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__identifier">pagination</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__boolean">false</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__identifier">cover</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__boolean">true</code><code class="rl__token rl__delimiter">,</code></div><div class="rl__line is-active"><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">isNavigation</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__boolean">true</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__identifier">breakpoints</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__bracket">{</code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__number">600</code><code class="rl__token rl__operator">:</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">fixedWidth</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__number">60</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__identifier">
1fixedHeight</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">44</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__bracket">}</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__bracket">}</code><code class="rl__token rl__delimiter">,</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><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">\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>new Splide( \'#thumbnail-slider\', {\n fixedWidth : 100,\n fixedHeight : 60,\n gap : 10,\n rewind : true,\n pagination : false,\n cover : true,\n isNavigation: true,\n breakpoints : {\n 600: {\n fixedWidth : 60,\n fixedHeight: 44,\n },\n },\n} ).mount();</pre>\n </div>'}}),"\n",o.createElement(l.p,null,"Now the slider looks like this. Click a thumbnail, and you will see the slider moves:"),"\n",o.createElement(_,{id:"thumbnails-incomplete-navigation",images:!0,options:{fixedWidth:100,fixedHeight:60,gap:10,rewind:!0,pagination:!1,cover:!0,isNavigation:!0,focus:"center",breakpoints:{600:{fixedWidth:60,fixedHeight:44}}}}),"\n",o.createElement(s,{type:"info",text:"To ignore small drag by a mouse, use the [`dragMinThreshold`](/v3/guides/options/#dragminthreshold) option."}),"\n",o.createElement(l.h2,{id:"main-slider",style:{position:"relative"}},o.createElement(l.a,{href:"#main-slider","aria-label":"main slider permalink",className:"anchor before"},o.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>'}})),"Main Slider"),"\n",o.createElement(l.p,null,"This tutorial uses the following fade slider.\nYou have to assign a different ID, such as ",o.createElement(l.code,null,"main-slider"),", or a class to grab it later by script."),"\n",o.createElement(_,{id:"fade-transition",images:!0,options:{type:"fade",rewind:!0,height:null,heightRatio:.5625,cover:!0,pagination:!1,arrows:!1,breakpoints:{640:{height:null}}},code:"var main = new Splide( '#main-slider', {\n type : 'fade',\n rewind : true,\n pagination: false,\n arrows : false,\n} );\n"}),"\n",o.createElement(l.p,null,"This example disables arrows and pagination,\nbut if you want to enable them, simply delete these options."),"\n",o.createElement(l.h2,{id:"sync",style:{position:"relative"}}
1,o.createElement(l.a,{href:"#sync","aria-label":"sync permalink",className:"anchor before"},o.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>'}})),"Sync"),"\n",o.createElement(l.p,null,"To sync the main slider to thumbnails, use the ",o.createElement(l.code,null,"Splide#sync()")," method.\nYou must call it ",o.createElement(l.strong,null,"before ",o.createElement(l.code,null,"mount()")),"."),"\n",o.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">main</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">\'#main-slider\'</code><code class="rl__token rl__delimiter">,</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__delimiter">...</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><code class="rl__token rl__delimiter">;</code></div><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">thumbnails</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">\'#thumbnail-slider\'</code><code class="rl__token rl__delimiter">,</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__delimiter">...</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><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">main</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">sync</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">thumbnails</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__identifier">main</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 class="rl__line"><code class="rl__token rl__identifier">thumbnails</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 main = new Splide( \'#main-slider\', { ... } );\nvar thumbnails = new Splide( \'#thumbnail-slider\', { ... } );\n\n\nmain.sync( thumbnails );\nmain.mount();\nthumbnails.mount();</pre>\n </div>'}}),"\n",o.createElement(l.p,null,"That's all! ð Here is the whole code of this tutorial:"),"\n",o.createElement(l.div,{dangerouslySetInnerHTML:{__html:'<div class="ryuseilight-wrapper ryusei">\n <pre class="ryuseilight ryuseilight--javascript"><div class="rl__container has-gutter has-top-overlay"><div class="rl__body"><div class="rl__gutter" aria-hidden="true"><div class="rl__gutter__row"><span class="rl__line-number">1</span></div><div class="rl__gutter__row"><span class="rl__line-number">2</span></div><div class="rl__gutter__row"><span class="rl__line-number">3</span></div><div class="rl__gutter__row"><span class="rl__line-number">4</span></div><div class="rl__gutter__row"><span class="rl__line-number">5</span></div><div class="rl__gutter__row"><span class="rl__line-number">6</span></div><div class="rl__gutter__row"><span class="rl__line-number">7</span></div><div class="rl__gutter__row"><span class="rl__line-number">8</span></div><div class="rl__gutter__row"><span class="rl__line-number">9</span></div><div class="rl__gutter__row"><span class="rl__line-number">10</span></div><div class="rl__gutter__row"><span class="rl__line-number">11</span></div><div class="rl__gutter__row"><span class="rl__line-number">12</span></div><div class="rl__gutter__row"><span class="rl__line-number">13</span></div><div class="rl__gutter__row"><span class="rl__line-number">14</span></div><div class="rl__gutter__row"><span class="rl__line-number">15</span></div><div class="rl__gutter__row"><span class="rl__line-number">16</span></div><div class="rl__gutter__row"><span class="rl__line-number">17</span></div><div class="rl__gutter__row"><span class="rl__line-number">18</span></div><div class="rl__gutter__row"><span class="rl__line-number">19</span></div><div class="rl__gutter__row"><span class="rl__line-number">20</span></div><div class="rl__gutter__row"><span class="rl__line-number">21</span></div><div class="rl__gutter__row"><span class="rl__line-number">22</span></div><div class="rl__gutter__row"><span class="rl__line-number">23</span></div><div class="rl__gutter__row"><span class="rl__line-number">24</span></div><div class="rl__gutter__row"><span class="rl__line-number">25</span></div><div class="rl__gutter__row"><span class="rl__line-number">26</span></div><div class="rl__gutter__row"><span class="rl__line-number">27</span></div><div class="rl__gutter__row"><span class="rl__line-number">28</span></div></div><div class="rl__code"><div class="rl__line"><code class="rl__token rl__identifier">document</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">addEventListener</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'DOMContentLoaded\'</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__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__keyword">var</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">main</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">\'#main-slider\'</code><code class="rl__token rl__delimiter">,</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">type</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__string">\'fade\'</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__identifier">rewind</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__boolean">true</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__identifier">pagination</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__boolean">false</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__identifier">arrows</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__boolean">false</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__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__space"> </code><code class="rl__token rl__keyword">var</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">
1thumbnails</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">\'#thumbnail-slider\'</code><code class="rl__token rl__delimiter">,</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">fixedWidth</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__number">100</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__identifier">fixedHeight</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__number">60</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__identifier">gap</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__number">10</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__identifier">rewind</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__boolean">true</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__identifier">pagination</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__boolean">false</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__identifier">cover</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__boolean">true</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__identifier">isNavigation</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__boolean">true</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__identifier">breakpoints</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__bracket">{</code></div><div class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__number">600</code><code class="rl__token rl__operator">:</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">fixedWidth</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__number">60</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__identifier">fixedHeight</code><code class="rl__token rl__operator">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">44</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__bracket">}</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__bracket">}</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__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__space"> </code><code class="rl__token rl__identifier">main</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">sync</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">
1thumbnails</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__space"> </code><code class="rl__token rl__identifier">main</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 class="rl__line"><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">thumbnails</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 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></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">\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>document.addEventListener( \'DOMContentLoaded\', function () {\n var main = new Splide( \'#main-slider\', {\n type : \'fade\',\n rewind : true,\n pagination: false,\n arrows : false,\n } );\n\n\n var thumbnails = new Splide( \'#thumbnail-slider\', {\n fixedWidth : 100,\n fixedHeight : 60,\n gap : 10,\n rewind : true,\n pagination : false,\n cover : true,\n isNavigation: true,\n breakpoints : {\n 600: {\n fixedWidth : 60,\n fixedHeight: 44,\n },\n },\n } );\n\n\n main.sync( thumbnails );\n main.mount();\n thumbnails.mount();\n} );</pre>\n </div>'}}))}var r=function(e){void 0===e&&(e={});const{wrapper:l}=Object.assign({},(0,c.ah)(),e.components);return l?o.createElement(l,e,o.createElement(s,e)):s(e)};function d(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var t=_(1597),a=_(943),n=_(8388),i=_(382),k=_(1534),p=_(9324),v=_(6737),m=_(6193),u=_(1101),h=_(6262),b=_(7176),g=_(2637),w=_(447),f=_(7736),y=_(1632);const x={Box:p.x,Button:k.z,Link:t.Link,Params:v.S,Type:n.D,LinkTable:m.W,LinkTo:u.e,Example:i.e,Icon:h.J,ParamTable:b.m,Accessor:g.U,Key:w.s,VideoPlayer:f.Y};function E(e){let{data:l,pageContext:_,children:s}=e;const r=l.mdx;return o.createElement(a.Z,{heading:r.frontmatter.title,localizedHeading:r.frontmatter.localizedTitle,desc:r.frontmatter.desc,pageContext:_,isDocument:!0},o.createElement(c.Zo,{components:x},s))}function z(e){return o.createElement(E,e,o.createElement(r,e))}function S(e){let{data:l}=e;const{frontmatter:_}=l.mdx;
1return o.createElement(y.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-tutorials-thumbnail-slider-index-mdx-4ae2ffe5685a5c185166.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.