Product Carousel Component

Scroll to Image:

Add New Image:

Update Image Caption:

Utility Functions:

JavaScript API:

// Get the carousel element
const carousel = document.querySelector('product-carousel');

// Scroll to a specific image
carousel.scrollToSlide('image-1');

// Add a new product image
carousel.addItem('<img src="image.jpg" alt="Product" />', 'image-5');

// Update existing slide content
carousel.updateSlide('image-1', '<img src="new-image.jpg" alt="Updated" />');

// Get current slide ID
const currentId = carousel.getCurrentSlideId();

// Get all slide IDs
const allIds = carousel.getSlideIds();

// Remove a slide
carousel.removeSlide('variant-yellow');

Thumbnail Navigation:

<product-carousel data-carousel-id="my-carousel">
  <div data-carousel-track>
    <div data-slide-id="image-1">
      <img src="product-1.jpg" alt="Product view 1" />
      <p>Caption for image 1</p>
    </div>
    <div data-slide-id="image-2">
      <img src="product-2.jpg" alt="Product view 2" />
      <p>Caption for image 2</p>
    </div>
  </div>
</product-carousel>

<product-carousel-thumbs data-carousel-id="my-carousel">
  <button data-thumbnail-slide-id="image-1">
    <img src="thumb-1.jpg" alt="Thumbnail 1" />
  </button>
  <button data-thumbnail-slide-id="image-2">
    <img src="thumb-2.jpg" alt="Thumbnail 2" />
  </button>
</product-carousel-thumbs>

Use data-carousel-id on both components to link them together. This is required and especially important when you have multiple carousels on the same page. Clicking a thumbnail scrolls to the related slide, and the active thumbnail is highlighted automatically.