Trigger the slider outside the slider

How To
1

Sorry if it’s been asked, I did look. I’d like to build a custom nav for the slider, so that buttons around the slider, trigger slide X when clicked. E.g. buttons - ‘shoes’ - ‘socks’ - ‘slippers’ when clicked show all the wonderful information on shoes or socks or slippers in the slider.
Is there a simple way to add the trigger to a button so it makes the slide go to SLIDE X ?
Thanks

2

Bricks forum always seems to know what I worked on last and shows me old but relevant questions haha.

Yes it’s possible although a little tricky. By default, you can only go to a slide by index. If for example you are looping over your categories with 2 query loops, one for the slider and one for the button, it’s easy cause the Index will always match.

Another way would be to use the hash navigation extension URL Hash Navigation - Splide
If you wanna go this route though then to my knowledge, you basically gotta crate a splide slider from scratch as outlined here for another extension Add support for Splide autoscroll

Lastly, the route I took… I have an svg map with different regions with different ids. On click I needed the slider to show the slide with the same ID as attribute. Think of me regions as your buttons. In my case, the attribute is set using an acf field and dynamic data on the slides and then I slide like so:

function (){
// GET THE SLIDE THAT HAS THE ATTRIBUTE WE WANNA SCROLL TO
  var slide = document.querySelector(`[data-map=${region.id}]`);

// GET ALL SLIDES
  var els = Array.prototype.slice.call( document.getElementsByClassName('splide__slide'), 0 );

// FIND THE SLIDE INDEX OF THE SLIDE WITH OUR ATTRIBUTE
  var selectedSlide = els.indexOf(slide);
  
// GO TO SLIDE
  if(slide){
  bricksData.splideInstances.dnaogm.go(selectedSlide);
  }
}

In bricksData.splideInstances.dnaogm.go(selectedSlide);, “dnaogm” is the slider id which you’ll need to look up in the inspector for your slider.

here are all the methods to go to a slide: APIs - Splide

Note that my method doesn’t work if the slider is set to loop cause the cloned slides mess it up. I didn’t need that anyway so didn’t look further into it. If needed to work with loop, code would need to be modified a bit.