splide
splide copied to clipboard
Published
20 hours ago •
Splidejs
Splidejs
Unable to reproduce Autoplay docs
trafficstars
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/[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.
