Gallery slider with thumbnail navigation

[RDADALTE]

I’m struggling to make a gallery slider like this one:

I imagine that this needs a main stacked slider and a secondary inline slider to use as navigation.

I’ve made a JSON loop of images to simulate an ACF gallery that I’ll use later to populate this slider.

I’ve built the main slider and below it I inserted a row with the same images looped, where each image have the “data-x-slide-goto” custom property and the value is the DC “{{dc:looper:index}}”. This works as expected and when I click on the thumbnail, the main slider shows me the respective image.

Then I changed this row for a inline slider, with the same loop and custom property for the images. With this setup, when I click in a thumbnail, it doesn’t work as expect and the secondary slider just scroll itself.

I’ve read the documentation and I tried to make it work with “data-x-slide-context”, I even searched for topics about this here in the forum, but I couldn’t get this working, I’m a little confused on how to use this property, but I think this is the right path to solve my problem.

Here’s a link to the test page: https://teste.wp.dev.br/teste/

I’ll leave login credentials in the secure note, if needed, but I’d appreciate some help on this topic, I think I’m almost there.

[tristup]

Hi @RDADALTE,

Thanks for reaching out.
One slider can’t interact with the other slider, as you are trying to achieve here. If you still want to do that, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One TOTAL CARE, where we offer small customizations.

I would also check with our development team, and if possible will add Thumbnail navigation as a feature request so it can be taken into consideration in the future.

Thanks

[RDADALTE]

Right, can you please show me a use case scenario/example for “data-x-slide-context” and how it works? There’s no examples in the documentation. What type of value should we use for this property?

[tristup]

Hi @RDADALTE,

The data-x-slide-context attribute is helpful when multiple sliders are used in the same section, and you may need to mention the parent slider while adding the pagination.

Thanks

[charlie]

I think the problem with using data-x-slide-context as you might have already discovered is that it doesn’t work with stack + inline sliders. I created a template for you as I needed a custom script to do what I think you want to do. Which is a mini slider underneath a stacked slider. I can see about getting a better system for connecting these two types of sliders on our end. Script below for anyone that wants a reference.

https://theme.co/app/uploads/share/slider-with-thumbnail-gallery.tco

var NUMBER_OF_SMALL_SLIDERS = 3;

window.addEventListener("load", function() {
  // Grab Slide Container elements
  const smallSlider = document.getElementById("smallSlider");
  const bigSlider = document.getElementById("bigSlider");

  // Event dispatching system
  const smallSliderSub = window.csGlobal.rivet.store.subscribe(smallSlider, "slider");

  
  // When big slider changes update small slider position
  const bigSliderSub = window.csGlobal.rivet.store.subscribe(bigSlider, "slider", function(state, changes) {

    smallSliderSub.dispatch(function(prev) {
      return {
        ...prev,
        navigateTo: Math.floor((state.current - 1) / NUMBER_OF_SMALL_SLIDERS)
      };
    });

  });
  
  // Setup inner clicks of small slider
  var slides = smallSlider.querySelectorAll(".x-slide");
  
  for(var i = 0; i < slides.length; ++i) {
    addSmallSliderClickSetup(slides[i], i, bigSliderSub);
  }
}, { passive: true });

// Click event to navigate small slider to big slider
function addSmallSliderClickSetup(el, index, bigSliderSub) {
  el.addEventListener("click", function() {
    // Navigate big slider
    bigSliderSub.dispatch(function(prev) {
      return {
        ...prev,
        navigateTo: index
      }
    })
  }, { passive: true })
}

[RDADALTE]

Thanks for your answer, Charlie!

About “data-x-slide-context”, I tried different setups to understand how it works, but even with 2 identical stacked sliders separated in columns in the same row, and a slider navigation element on the row below, I couldn’t get the navigation to work with the second slider. I tried to reproduce what was specified on the documentation:

However, if you are placing multiple sliders with multiple navigation Elements all within one Section, that is a situation where you might want to go up to the unique parent of each Slider and place this attribute on it to avoid any cross-talk between the Sliders.

I tried to switch which slider the navigation element controls using “data-x-slide-context=slider-1” and “data-x-slide-context=slider-2” in the Slide Container and Slider Navigation elements, or “data-x-slide-context=#slider-1” and “data-x-slide-context=#slider-2” in the Slide Navigation and then setting the same ids for each Slide Container, but it seems that this is not how it works. I left an example of this test in the page “New Test”.

Now, about the template and script that you provided, it seems to work fine in the front-end, even when I add a navigation for the small slider it worked, so I think my problem is solved for now. I’ll take sometime to try and understand how the script works, as my knowledge in JS is limited, but I appreciate your attention to solve this issue! I hope that we get an easier way to achieve this behavior in future updates though.

If you let me, I’m willing to do some styling on this slider and share a .tco template in the Facebook Pro Theme community too, as it was the first place where I posted about it and some people were interested in the solution too.

Thanks again!

[tristup]

Hi @RDADALTE,

Glad that it resolved your problem, and you can share it on Facebook.

Thanks