Menu
I'm using this site & Splide.js for the first time. I know some basics but i'm not experienced in this. I want to create multiple slides on my page but the mainslide stays active all the time.
So what I'm doing is creating both sliders:
document.addEventListener( 'DOMContentLoaded', function () {
mainslide = new Splide( '#mainslide', {
type : 'loop',
perPage: 5,
perMove: 1,
direction: 'rtl',
trimSpace: false,
keyboard: true,
gap: '1em',
width: '100%',
height: '100%',
})
wheelslide = new Splide( '#wheelslide', {
type: 'loop',
perPage: 5,
perMove: 1,
direction: 'rtl',
trimSpace: false,
keyboard: true,
gap: '1em',
width: '100%',
height: '100%'
})
} );
When I'm opening my page im doing:
mainslide.mount();
And when i'm opening another page where I want to display another slider i'm doing:
$('#mainslide').hide()
mainslide.destroy(true)
mainslide.mount();
$('#wheelslide').show()
Whats happening now is that the new page or the new slider still thinks i'm working with the first slider. So the first slider does not get destroyed imo. When I console.log the id of the slider i still have the id mainslide01 instead it should be wheelslide01. I'm a bit stuck and I dont know how to continue from here.
Thanks in advance
664
asked Jul 22 '26 01:07
I had a problem too but I could resolve it. See the code below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/splide-core.min.css">
<script src="assets/js/splide.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
new Splide('#new-product', {
perPage: 3,
perMove: 1,
gap: "30px",
pagination: false,
}).mount();
});
document.addEventListener('DOMContentLoaded', function () {
new Splide('#featured-product', {
perPage: 4,
perMove: 1,
gap: "30px",
pagination: false,
}).mount();
});
</script>
<title>SplideJS</title>
</head>
<body>
<div id="new-product" class="splide">
<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>
<li class="splide__slide">Slide 04</li>
<li class="splide__slide">Slide 05</li>
</ul>
</div>
</div>
<div id="featured-product" class="splide">
<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>
<li class="splide__slide">Slide 04</li>
<li class="splide__slide">Slide 05</li>
<li class="splide__slide">Slide 06</li>
<li class="splide__slide">Slide 07</li>
</ul>
</div>
</div>
</body>
</html>
Just add an id attribute to main sliders containers and then refer to them in Splide initialization code. You will see two sliders work well separately on the same page.
117
answered Jul 24 '26 13:07
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With