https://splidejs.com/component---src-templates-document-js-content…s-gallery-index-mdx-e22705e43fa4664026b1.js

1"use strict";(self.webpackChunk_splidejs_splide_site=self.webpackChunk_splidejs_splide_site||[]).push([[8154],{1561:function(e,l,_){_.r(l),_.d(l,{Head:function(){return T},default:function(){return E}});var c=_(1151),s=_(7294);function o(e){const l=Object.assign({h2:"h2",a:"a",div:"div",p:"p",code:"code",ul:"ul",li:"li"},(0,c.ah)(),e.components),{Example:_,LinkTo:o,Box:r}=l;return r||d("Box",!0),_||d("Example",!0),o||d("LinkTo",!0),s.createElement(s.Fragment,null,s.createElement(l.h2,{id:"introduction",style:{position:"relative"}},s.createElement(l.a,{href:"#introduction","aria-label":"introduction 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>'}})),"Introduction"),"\n",s.createElement(l.p,null,"In this tutorial, you'll learn how to control the slider by basic APIs with creating the following gallery.\nThumbnails are clickable to navigate the slider and respond to the slider changes."),"\n",s.createElement(_,{id:"gallery",length:4,images:!0,gallery:!0,options:{cover:!0,heightRatio:.5625,height:null,pagination:!1,breakpoints:{640:{height:null}}}}),"\n",s.createElement(l.h2,{id:"html-and-css",style:{position:"relative"}},s.createElement(l.a,{href:"#html-and-css","aria-label":"html and css 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>'}})),"HTML and CSS"),"\n",s.createElement(l.p,null,"First, we need to write HTML of the slider and thumbnails:"),"\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">&lt;</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">"main-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">&lt;</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">    </code><code class="rl__token rl__bracket">&lt;</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">      </code><code class="rl__token rl__bracket">&lt;</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">        </code><code class="rl__token rl__bracket">&lt;</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">"image1.jpg"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__delimiter">/</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">&lt;</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">      </code><code class="rl__token rl__bracket">&lt;</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">        </code><code class="rl__token rl__bracket">&lt;</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">"image2.jpg"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__delimiter">/</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">&lt;</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">      </code><code class="rl__token rl__bracket">&lt;</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">        </code><code class="rl__token rl__bracket">&lt;</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">"image3.jpg"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__delimiter">/</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">&lt;</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">      </code><code class="rl__token rl__bracket">&lt;</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">        </code><code class="rl__token rl__bracket">&lt;</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">"image4.jpg"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__delimiter">/</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">&lt;</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">    </code><code class="rl__token rl__bracket">&lt;</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">&lt;</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">&lt;</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"><code class="rl__token rl__bracket">&lt;</code><code class="rl__token rl__tag">ul</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">"thumbnails"</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">"thumbnails"</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">&lt;</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">"thumbnail"</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">&lt;</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">"thumbnail1.jpg"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__delimiter">/</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">&lt;</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">  </code><code class="rl__token rl__bracket">&lt;</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">"thumbnail"</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">&lt;</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">"thumbnail2.jpg"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__delimiter">/</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">&lt;</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">  </code><code class="rl__token rl__bracket">&lt;</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">"thumbnail"</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">&lt;</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">"thumbnail3.jpg"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__delimiter">/</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">&lt;</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">  </code><code class="rl__token rl__bracket">&lt;</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">"thumbnail"</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">&lt;</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">"thumbnail4.jpg"</code><code class="rl__token rl__space"> </code><code class="rl__token rl__delimiter">/</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">&lt;</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">&lt;</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></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>&lt;div id="main-slider" class="splide">\n  &lt;div class="splide__track">\n    &lt;ul class="splide__list">\n      &lt;li class="splide__slide">\n        &lt;img src="image1.jpg" />\n      &lt;/li>\n      &lt;li class="splide__slide">\n        &lt;img src="image2.jpg" />\n      &lt;/li>\n      &lt;li class="splide__slide">\n        &lt;img src="image3.jpg" />\n      &lt;/li>\n      &lt;li class="splide__slide">\n        &lt;img src="image4.jpg" />\n      &lt;/li>\n    &lt;/ul>\n  &lt;/div>\n&lt;/div>\n\n\n&lt;ul id="thumbnails" class="thumbnails">\n  &lt;li class="thumbnail">\n    &lt;img src="thumbnail1.jpg" />\n  &lt;/li>\n  &lt;li class="thumbnail">\n    &lt;img src="thumbnail2.jpg" />\n  &lt;/li>\n  &lt;li class="thumbnail">\n    &lt;img src="thumbnail3.jpg" />\n  &lt;/li>\n  &lt;li class="thumbnail">\n    &lt;img src="thumbnail4.jpg" />\n  &lt;/li>\n&lt;/ul></pre>\n      </div>'}}),"\n",s.createElement(l.p,null,"Then, style thumbnails as you like. This example uses this CSS:"),"\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">.thumbnails</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">display</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">flex</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">margin</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__text">rem</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">auto</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">0</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">padding</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">0</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">justify-content</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">center</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">.thumbnail</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">70</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">height</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">70</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">overflow</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">hidden</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">list-style</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">none</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">margin</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">0</code><code class="rl__token rl__space"> </code><code class="rl__token rl__number">0.2</code><code class="rl__token rl__text">rem</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">cursor</code><code class="rl__token rl__delimiter">:</code><code class="rl__token rl__space"> </code><code class="rl__token rl__text">pointer</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">.thumbnail</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">

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>.thumbnails {\n  display: flex;\n  margin: 1rem auto 0;\n  padding: 0;\n  justify-content: center;\n}\n\n\n.thumbnail {\n  width: 70px;\n  height: 70px;\n  overflow: hidden;\n  list-style: none;\n  margin: 0 0.2rem;\n  cursor: pointer;\n}\n\n\n.thumbnail img {\n  width: 100%;\n  height: auto;\n}</pre>\n      </div>'}}),"\n",s.createElement(l.h2,{id:"slider",style:{position:"relative"}},s.createElement(l.a,{href:"#slider","aria-label":"slider 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>'}})),"Slider"),"\n",s.createElement(l.p,null,"Next, initialize the main slider.\nThis example disables indicator dots because the slider will have the thumbnail control:"),"\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">\'#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">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__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( \'#main-slider\', {\n  pagination: false,\n} );\n\n\nsplide.mount();</pre>\n      </div>'}}),"\n",s.createElement(l.h2,{id:"thumbnails",style:{position:"relative"}},s.createElement(l.a,{href:"#thumbnails","aria-label":"thumbnails 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>'}})),"Thumbnails"),"\n",s.createElement(l.p,null,"Okay, the most important part is coming 💪"),"\n",s.createElement(l.p,null,"To make thumbnails clickable, we need to listen to their ",s.createElement(l.code,null,"click")," events:"),"\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__comment">// Collects LI elements:</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__identifier">document</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">getElementsByClassName</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'thumbnail\'</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__keyword">for</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__keyword">var</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">i</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">0</code><code class="rl__token rl__delimiter">;</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">i</code><code class="rl__token rl__space"> </code><code class="rl__token rl__operator">&lt;</code><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__identifier">length</code><code class="rl__token rl__delimiter">;</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">i</code><code class="rl__token rl__operator">++</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__function">initThumbnail</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__bracket">[</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">i</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__identifier">i</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__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__comment">// The function to initialize each thumbnail.</code></div><div class="rl__line"><code class="rl__token rl__keyword">function</code><code class="rl__token rl__space"> </code><code class="rl__token rl__function">initThumbnail</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">

1thumbnail</code><code class="rl__token rl__delimiter">,</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">index</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">thumbnail</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">\'click\'</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__comment">// move the slider</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__bracket">}</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>// Collects LI elements:\nvar thumbnails = document.getElementsByClassName( \'thumbnail\' );\n\n\nfor ( var i = 0; i &lt; thumbnails.length; i++ ) {\n  initThumbnail( thumbnails[ i ], i );\n}\n\n\n// The function to initialize each thumbnail.\nfunction initThumbnail( thumbnail, index ) {\n  thumbnail.addEventListener( \'click\', function () {\n    // move the slider\n  } );\n}</pre>\n      </div>'}}),"\n",s.createElement(l.p,null,"You can move the slider via the ",s.createElement(l.code,null,"Splide#go()")," method:"),"\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__delimiter">...</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__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__keyword">function</code><code class="rl__token rl__space"> </code><code class="rl__token rl__function">initThumbnail</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">

1thumbnail</code><code class="rl__token rl__delimiter">,</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">index</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">thumbnail</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">\'click\'</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 is-active"><code class="rl__token rl__space">    </code><code class="rl__token rl__identifier">splide</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">go</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">index</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__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__bracket">}</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>var splide = new Splide( ... );\n\n\n...\n\n\nfunction initThumbnail( thumbnail, index ) {\n  thumbnail.addEventListener( \'click\', function () {\n    splide.go( index );\n  } );\n}</pre>\n      </div>'}}),"\n",s.createElement(l.p,null,"Now we can navigate the slider by clicking thumbnails, but the user won't be sure which thumbnail is currently selected.\nTo emphasize it by CSS, let's add the ",s.createElement(l.code,null,"is-active")," class to the active thumbnail.\nYou can toggle the class by listening to ",s.createElement(l.code,null,"'move'")," event triggered every time when the slider moves:"),"\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">

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__identifier">document</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">getElementsByClassName</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'thumbnail\'</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">current</code><code class="rl__token rl__delimiter">;</code><code class="rl__token rl__space"> </code><code class="rl__token rl__comment">// Keeps the current thumbnail</code></div><div class="rl__line"><code class="rl__token rl__lb">\n</code></div><div class="rl__line"><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">\'move\'</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">if</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">current</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">current</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__identifier">classList</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">remove</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'is-active\'</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__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__space">  </code><code class="rl__token rl__comment">// Splide#index returns the latest slide index:</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">thumbnail</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__identifier">thumbnails</code><code class="rl__token rl__bracket">[</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">splide</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__identifier">index</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">if</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">

1thumbnail</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">thumbnail</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__identifier">classList</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">add</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'is-active\'</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">current</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__identifier">thumbnail</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></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>var thumbnails = document.getElementsByClassName( \'thumbnail\' );\nvar current; // Keeps the current thumbnail\n\n\n...\n\n\nsplide.on( \'move\', function () {\n  if ( current ) {\n    current.classList.remove( \'is-active\' );\n  }\n\n\n  // Splide#index returns the latest slide index:\n  var thumbnail = thumbnails[ splide.index ];\n\n\n  if ( thumbnail ) {\n    thumbnail.classList.add( \'is-active\' );\n    current = thumbnail;\n  }\n} );</pre>\n      </div>'}}),"\n",s.createElement(l.p,null,"The ",s.createElement(l.code,null,"current")," variable holds the current thumbnail element so that we remove the class when it changes."),"\n",s.createElement(l.p,null,"By using the ",s.createElement(l.code,null,"is-active")," class, we can clarify the selected thumbnail like this:"),"\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">.thumbnail</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__text">...</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">.thumbnail.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">

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>.thumbnail {\n  ...\n  opacity: 0.3;\n}\n\n\n.thumbnail.is-active {\n  opacity: 1;\n}</pre>\n      </div>'}}),"\n",s.createElement(l.p,null,"As we add the class when the slider moves, no slide is active initially.\nSo, we also need to update the class when the slider is initialized:"),"\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__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">\'mounted move\'</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__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>splide.on( \'mounted move\', function () {\n  ...\n} );</pre>\n      </div>'}}),"\n",s.createElement(l.p,null,"We're done! 🎉 Here is the whole code of this tutorial:"),"\n",s.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 class="rl__gutter__row"><span class="rl__line-number">29</span></div><div class="rl__gutter__row"><span class="rl__line-number">30</span></div><div class="rl__gutter__row"><span class="rl__line-number">31</span></div></div><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">\'#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">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__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__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__identifier">document</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">getElementsByClassName</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'thumbnail\'</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">current</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__keyword">for</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__keyword">var</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">i</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">0</code><code class="rl__token rl__delimiter">;</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">i</code><code class="rl__token rl__space"> </code><code class="rl__token rl__operator">&lt;</code><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__identifier">length</code><code class="rl__token rl__delimiter">;</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">i</code><code class="rl__token rl__operator">++</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__function">initThumbnail</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__bracket">[</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">i</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__identifier">i</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__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__keyword">function</code><code class="rl__token rl__space"> </code><code class="rl__token rl__function">initThumbnail</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">thumbnail</code><code class="rl__token rl__delimiter">,</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">index</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">thumbnail</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">\'click\'</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__identifier">splide</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">go</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">index</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__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__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__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">\'mounted move\'</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">

1thumbnail</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__identifier">thumbnails</code><code class="rl__token rl__bracket">[</code><code class="rl__token rl__space"> </code><code class="rl__token rl__identifier">splide</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__identifier">index</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">if</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">thumbnail</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__keyword">if</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">current</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">current</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__identifier">classList</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">remove</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'is-active\'</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__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__space">    </code><code class="rl__token rl__identifier">thumbnail</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__identifier">classList</code><code class="rl__token rl__delimiter">.</code><code class="rl__token rl__function">add</code><code class="rl__token rl__bracket">(</code><code class="rl__token rl__space"> </code><code class="rl__token rl__string">\'is-active\'</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">current</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__identifier">thumbnail</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></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( \'#main-slider\', {\n  pagination: false,\n} );\n\n\nvar thumbnails = document.getElementsByClassName( \'thumbnail\' );\nvar current;\n\n\nfor ( var i = 0; i &lt; thumbnails.length; i++ ) {\n  initThumbnail( thumbnails[ i ], i );\n}\n\n\nfunction initThumbnail( thumbnail, index ) {\n  thumbnail.addEventListener( \'click\', function () {\n    splide.go( index );\n  } );\n}\n\n\nsplide.on( \'mounted move\', function () {\n  var thumbnail = thumbnails[ splide.index ];\n\n\n  if ( thumbnail ) {\n    if ( current ) {\n      current.classList.remove( \'is-active\' );\n    }\n\n\n    thumbnail.classList.add( \'is-active\' );\n    current = thumbnail;\n  }\n} );\n\n\nsplide.mount();</pre>\n      </div>'}}),"\n",s.createElement(l.p,null,"This sample code is available in ",s.createElement(o,{href:"https://codesandbox.io/s/gallery-hkzhm"},"CodeSandbox")," too."),"\n",s.createElement(r,{type:"caution",text:"This gallery is not compatible with the `destroy` option because Splide discards all handlers on destruction. You need to create an extension to make it work with the option."}),"\n",s.createElement(l.h2,{id:"tips",style:{position:"relative"}},s.createElement(l.a,{href:"#tips","aria-label":"tips 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>'}})),"Tips"),"\n",s.createElement(l.p,null,"I highly recommend improving the accessibility by implementing these things:"),"\n",s.createElement(l.ul,null,"\n",s.createElement(l.li,null,"Assign ",s.createElement(l.code,null,'tabindex="0"')," to thumbnails for keyboard users"),"\n",s.createElement(l.li,null,"Add ",s.createElement(l.code,null,"aria-label")," to tell what happens when the user selects each thumbnail"),"\n",s.createElement(l.li,null,"Add ",s.createElement(l.code,null,"aria-current")," to the active thumbnail"),"\n",s.createElement(l.li,null,"Link thumbnails to the slider by ",s.createElement(l.code,null,"aria-controls")," for some assistive technologies"),"\n"))}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 d(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),t=_(943),n=_(8388),i=_(382),k=_(1534),p=_(9324),v=_(6737),m=_(6193),b=_(1101),u=_(6262),h=_(7176),g=_(2637),w=_(447),y=_(7736),f=_(1632);const x={Box:p.x,Button:k.z,Link:a.Link,Params:v.S,Type:n.D,LinkTable:m.W,LinkTo:b.e,Example:i.e,Icon:u.J,ParamTable:h.m,Accessor:g.U,Key:w.s,VideoPlayer:y.Y};function z(e){let{data:l,pageContext:_,children:o}=e;const r=l.mdx;return s.createElement(t.Z,{heading:r.frontmatter.title,localizedHeading:r.frontmatter.localizedTitle,desc:r.frontmatter.desc,pageContext:_,isDocument:!0},s.createElement(c.Zo,{components:x},o))}function E(e){return s.createElement(z,e,s.createElement(r,e))}function T(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-tutorials-gallery-index-mdx-e22705e43fa4664026b1.js.map