I’m using splide to build image carousels and have set it up so it generates a new splide each time a new image carousel module is used. I’ve successfully set it up to allow mutliple modules and splides on the same page but where I’m having trouble is using the splide.go() command to move the carousel to specific images after clicking buttons/tabs that correspond to images within the carousel.
the info on splide.go() is here: https://splidejs.com/components/controller/
What I’m not sure of or would like help with is whether I can use unique variable names for splide.go() or if it’s limited to only the variable “splide”. For example, can I have splide1.go(), splide2.go() to correspond to each subsequent carousel. If not, I’ll need a way to figure out how to uniquely change the image position for each unique carousel, not all at once.
From what I’ve tested splide(i) or different variables doesn’t seem to work how I want.
I had a similar question before but didn’t receive any replies: Multiple splide carousels- how can I store each carousel in a forLoop as a separate variable so I can use splide.go() to advance slides?
Since then I’ve used a for loop to generate new splide carousels so I can have multiple per page, but it doesn’t seem to let me use unique variables for the splide.go() functionality to move the slides forward or back depending on which tab is clicked.
Using code below. It uses Hubspot Hubl so I’m not sure if it will work as it should be hopefully it shows what I’m talking about
$(document).ready(function(){
var splides = document.querySelectorAll('.splide');
// 1. query slider elements: are there any splide elements?
if(splides.length){
// 2. process all instances
for(var i=0; i<splides.length; i++){
var splideElement = splides[i];
var splideDefaultOptions = {
pagination: false,
autoplay: false,
arrows: true,
navigation:false,
type: 'loop',
perPage: 1,
}
var splide = new Splide( splideElement, splideDefaultOptions );
// 3. mount/initialize this slider
splide.mount();
$('.features-top-tab .button-primary-2').click(function() {
let id = $(this).data('id');
splide.go(id-1);
});
}
}.features-image-carousel-container-2 .features-carousel {
padding-top:80px;
padding-bottom:100px;
}
.features-image-carousel-container-2 .features-carousel .splide {
max-width:676px;
}
.features-image-carousel-container-2 .features-carousel .splide img {
max-width: 674px ! Important;
max-height: 440px ! Important;
object-fit: cover;
border-radius: 15px;
box-shadow: 0px 4px 44px 0px rgba(89, 89, 89, 0.30);
}
.splide .splide__arrow--next, .splide .splide__arrow--prev {
border-radius: 50px;
width:48px;
height:48px;
background-color: var(--Primary-Colors-Contract-Safe-Blue, #0D4EB5);
}
.features-image-carousel-container-2 .splide__slide img {
width:100%;
}
.splide .splide__arrow--next {
right:-5rem;
}
.splide .splide__arrow--prev {
left:-5rem;
} <div class="features-carousel-wrapper">
<div class="carousel-title">
<h2> carousel title </h2>
</div>
<div class="features-top-tab-row">
{% for item in module.top_carousel_tab %}
<div class="features-top-tab">
<div data-id="{{loop.index}}" class="button-primary-2">
{% inline_text field="top_carousel_tab_text" value="{{ item.top_carousel_tab_text }}" %}
</div>
</div>
{% endfor %}
</div>
<div class="features-carousel">
<section class="splide" aria-label="Splide Basic HTML Example">
<div class="splide__arrows">
<button class="splide__arrow splide__arrow--prev">
</button>
<button class="splide__arrow splide__arrow--next">
</button>
</div>
<div class="splide__track">
<ul class="splide__list">
{% for item in module.carousel_image_two %}
<li class="splide__slide">
{% if item.src %}
{% set sizeAttrs = 'width="{{ item.width|escape_attr }}" height="{{ item.height|escape_attr }}"' %}
{% if item.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ item.width|escape_attr }}" height="{{ item.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
{% elif item.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ item.max_width|escape_attr }}" height="{{ item.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = item.loading != 'disabled' ? 'loading="{{ item.loading|escape_attr }}"' : '' %}
<img data-src="{{ item.src }}" src="{{ item.src|escape_url }}" alt="{{ item.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</section>
</div>
</div> What works for the splide.go() is:
$('.features-top-tab .button-primary-2').click(function() {
let id = $(this).data('id');
splide.go(id-1);
});
This corresponds to the data id with each “tab”, so clicking tab 1 corresponds to the 1st position in the carousel image and so on. The issue is going from the individual carousel to mutliple on the same page with different variable names. I thought maybe splideElement is the variable I needed but that didn’t work either.
For now each new splide on the page has a unique id of splide01 or splide 02 and so on