Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to reproduce Autoplay docs #1310

Open
2 tasks done
Freymaurer opened this issue May 27, 2024 · 2 comments
Open
2 tasks done

Unable to reproduce Autoplay docs #1310

Freymaurer opened this issue May 27, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@Freymaurer
Copy link

Checks

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

  1. Add cdn links
  2. Add DOMContentLoaded event listener to mount
  3. Add autoplay docs example
  4. 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/[email protected]/dist/js/splide.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/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 Freymaurer added the bug Something isn't working label May 27, 2024
@Freymaurer
Copy link
Author

added screenshot

image

@squidiw
Copy link

squidiw commented Jul 26, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@squidiw @Freymaurer