Slider (lightbox) with thumbnails

How To
1

Hello, is it possible to make a slider (lightbox) with thumbnails like the example?

image
image1035×626 95.4 KB

1 Like
2

I’d be very interested too.

1 Like
3

I guess @wplit might launch this in BricksExtras, since it has been a feature in OxyExtras too … if enough people are asking for it!

4

For sure. I’ve recently been hit with covid and have had to take some time off over the last 10 days or so, but this is one of the first things i’ll be focusing on after my brain fog clears.

4 Likes
5

Also interested in this, really missing this for bricks.

6

Seems so odd that this is so hard to find in Bricks.

7

I was able to achieve this by using two nestable sliders (splide) and then syncing them together. I first built the main slider that shows 1 slide and then the thumbnail slider was a duplicate of the main slider that showed 3 slides. I added the code below in a code block to sync the two sliders together.

function initSync() {
  initTimeout = setTimeout(syncSliders, 50);
}
 
function syncSliders() {  
  const    main = bricksData.splideInstances['MAIN-SLIDER-ID'],
              thumbnail = bricksData.splideInstances['THUMBNAIL-SLIDER-ID']
 
   if( main && thumbnail) {
   main.sync(thumbnail)
 
  }
 
  clearTimeout(initTimeout);  
 
}
 
 
 
document.addEventListener( 'DOMContentLoaded', initSync)

I also adjusted a few options for the thumbnail slider so that it could be used as the navigation for the main slider. To do so I had to add custom options to the thumbnail slider such as the below:

{
  "type": "loop",
  "direction": "ltr",
  "keyboard": "global",
  "height": "100%",
  "gap": "20px",
  "start": 0,
  "perPage": 3,
  "perMove": 1,
  "speed": 400,
  "interval": 3000,
  "autoHeight": false,
  "autoplay": false,
  "pauseOnHover": false,
  "pauseOnFocus": false,
  "arrows": false,
  "pagination": false,
  "mediaQuery": "max",
  "focus": "center",
  "isNavigation": true,
  "breakpoints": {
    "767": {
      "perPage": "2"
    },
    "1279": {
      "height": "100%",
      "gap": "20px",
      "perPage": "3"
    }
  }
}