Unable to reproduce Autoplay docs

Freymaurer commented 3 months ago

Checks

[X] Not a duplicate.
[X] 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

v4.1.4

Description

I want to reproduce the example on the top of the autoplay docs page.

I use cdn setup for reference, and follow the docs examples. In my case the pause/play button does not get styled at all.

Reproduction Link

No response

Steps to Reproduce

Add cdn links
Add DOMContentLoaded event listener to mount
Add autoplay docs example
No styling on play/pause button

<!DOCTYPE html>
<html lang="en" style="background-color: grey">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"
    />
  </head>
  <body>
    <div style="height: 400px">
      <section class="splide">
        <div class="splide__slider">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">Slide 01</li>
              <li class="splide__slide">Slide 02</li>
              <li class="splide__slide">Slide 03</li>
            </ul>
          </div>

          <div class="splide__progress">
            <div class="splide__progress__bar"></div>
          </div>

          <button class="splide__toggle" type="button">
            <svg
              class="splide__toggle__play"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="m22 12-20 11v-22l10 5.5z" />
            </svg>
            <svg
              class="splide__toggle__pause"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="m2 1v22h7v-22zm13 0v22h7v-22z" />
            </svg>
          </button>
        </div>
      </section>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var splide = new Splide(".splide", { autoplay: true, type: "loop" });
        splide.mount();
      });
    </script>
  </body>
</html>

This code can be pasted into any codesandbox to reproduce

Expected Behaviour

I expected the docs example to run correctly.

Best case show not only js settings for docs example but also related html structure.

Freymaurer commented 3 months ago

added screenshot

squidiw commented 1 month ago

You need to add the Autoscroll extenstion and then add it in the mount. -- https://splidejs.com/extensions/auto-scroll/

Splidejs / splide