I am navigating this website and using Splide.js for the first time. Although I have a basic understanding, I lack experience in this area. My goal is to incorporate multiple slides on my webpage while keeping the main slide active at all times.
To achieve this, I am setting up two 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%'
})
} );
Upon loading my page, I execute:
mainslide.mount();
When transitioning to a different page where I want to showcase another slider, I perform the following actions:
$('#mainslide').hide()
mainslide.destroy(true)
mainslide.mount();
$('#wheelslide').show()
The issue arises when the new page or slider still references the original slider. It seems like the initial slider is not being destroyed properly. Upon checking the id through console.log, it displays mainslide01 instead of wheelslide01. I find myself at an impasse and uncertain about how to proceed further.
Thank you for your assistance.