Image Slider/Clickable Thumbnail

Technical Q&A
,
1

Hi, I currently use Dawn theme. For images on my product page, I currently have an app that allows me to have an image slider, but not clickable thumbnails for people to click around my product images. Is there an app that allows for both an image slider and clickable thumbnails, or any css code I can add?

2

Hi,

Apps you can check - Product Image Gallery & Zoom,Image Gallery + Video,Product Image Slider & Gallery

Custom CSS Solution

If you’d prefer to add functionality through custom CSS and JavaScript, you can implement the solution directly in Shopify theme

JavaScript Example

document.querySelectorAll('.slider-thumbnails img').forEach((thumbnail, index) => {
    thumbnail.addEventListener('click', () => {
        document.querySelectorAll('.slider-main img').forEach((img) => {
            img.classList.remove('active');
        });
        document.querySelectorAll('.slider-main img')[index].classList.add('active');
    });
});

// Set the first image as active initially
document.querySelectorAll('.slider-main img')[0].classList.add('active');
3

Hi, do I put this into the bottom of theme.liquid? And is this css or javascript?