Code for demos

[ganeshkbhat]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v3.6.12

Description

Can you help me with the complete demo codes for the same. I am missing something in init of the slider and the css. I am trying this demo here. https://splidejs.com/tutorials/thumbnail-slider/

Reproduction Link

https://splidejs.com/tutorials/thumbnail-slider/

Steps to Reproduce

NA. The demo description was incomplete and a little difficult to apprehend. Please help.

<script src="./assets/css/s/js/splide.min.js"></script>
<link rel="stylesheet" href="./assets/css/s/css/splide.min.css"></link>
    <style>
        .splide__slide img {
            width: 100%;
            height: auto;
        }

        .splide__slide {
            opacity: 0.3;
        }

        .splide__slide.is-active {
            opacity: 1;
        }
    </style>
    <div id="thumbnail-slider" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <img src="thumbnail01.jpg">
                </li>
                <li class="splide__slide">
                    <img src="thumbnail02.jpg">
                </li>
                <li class="splide__slide">
                    <img src="thumbnail03.jpg">
                </li>
            </ul>
        </div>
    </div>
    <div id="main-slider">
        --- ????? ---
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var main = new Splide('#main-slider', {
                type: 'fade',
                rewind: true,
                pagination: false,
                arrows: false,
            });

            var thumbnails = new Splide('#thumbnail-slider', {
                fixedWidth: 100,
                fixedHeight: 60,
                gap: 10,
                rewind: true,
                pagination: false,
                cover: true,
                isNavigation: true,
                breakpoints: {
                    600: {
                        fixedWidth: 60,
                        fixedHeight: 44,
                    },
                },
            });

            main.sync(thumbnails);
            main.mount();
            thumbnails.mount();
        });
    </script>

Expected Behaviour

NA

[NaotoshiFujita]

<div id="main-slider">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="slide01.jpg">
      </li>
      <li class="splide__slide">
        <img src="slide02.jpg">
      </li>
      <li class="splide__slide">
        <img src="slide03.jpg">
      </li>
    </ul>
  </div>
</div>