Background: I’ve got a bunch of little containers containing image and text elements. The text elements are truncated and end with “…” and a “red more” button at the end.
The idea is to click the “read more” button which opens a popup containing a slider(nested) that has the expanded versions of all those little containers that are on the main page. So far so good, this I managed to implement.
HOWEVER: the following I was unable to implement and need some urgent guidance. I want the slider to slide to or open on the slide displaying the information corresponding to the button that was pressed.
EXAMPLE: (This is what I want to achieve)
On the main page, I have 6 truncated texts, let’s call them “ShortText1” through “ShortText6”. Underneath each text is a “read more” button. When I click on the “read more” button underneath “ShortText3”, I want the popup to open and display slide “LongText3” (containing the expanded text). While the slider shows, the user can click the left/right arrow-buttons to look at the other expanded texts.
If I were to click on the “read more” button underneath “ShortText5”, I’d want the popup to open with the slider showing “LongText5”.
WHAT I HAVE TRIED:
<script>
const pdBtn = document.getElementById("brxe-immxbh");
const splide = new Splide( '.splide' );
splide.mount();
pdBtn.addEventListener("click", function(){
splide.go(1);
});
</script>
I inserted the above on the page containing the “ShortText” blocks in the custom code section “Body (footer) scripts”.
POSSIBLE BUG: (as a side note)
While playing around, I discovered that when I run “splide.mount();” the slider actually opens on the second slide, and without this line it opens as expected on the first slide.
Thank you! Let me know if you need more info!
Cheers,
Maz