Product image sliders,
beautifully simple.

<!-- Your product card markup -->
<div class="product-slider">
  <img src="shoe-1.jpg" alt="Front">
  <img src="shoe-2.jpg" alt="Side">
  <img src="shoe-3.jpg" alt="Back">
</div>

import ProductCardSlider from 'product-card-slider';

// Single instance
new ProductCardSlider('.product-slider', {
  showDots: true,
  showArrows: true,
  lazyLoad: true,
});

// Or init all at once
ProductCardSlider.initAll('.product-slider');

<script src="https://unpkg.com/product-card-slider">
</script>

<script>
  ProductCardSlider.initAll('.slider', {
    hoverPreview: true,
  });
</script>

import { useRef, useEffect } from 'react';
import ProductCardSlider from 'product-card-slider';

function Card({ images }) {
  const ref = useRef();
  useEffect(() => {
    const s = new ProductCardSlider(ref.current);
    return () => s.destroy();
  }, []);

  return (
    <div ref={ref}>
      {images.map(src =>
        <img src={src} key={src} />
      )}
    </div>
  );
}