https://www.personalcreations.com/scripts/thumbnail_preview.js?d20e12ec88a7e5ce15a57b69dac1cf32c2728383

1/**
2 * Cart/order thumbnail carousel (front/back preview arrows).
3 *
4 * Loaded globally (top_menu.php / script_footer.php). Uses document delegation so
5 * dynamically injected rows — e.g. mini-cart body from GET /rest/web/mine/mini-cart —
6 * work without re-init.
7 */
8window.componentThumbnailPreview = (function () {
9    var COMPONENT = '.container-component-image';
10    var THUMBNAIL_ITEMS = '.container-carousel-items';
11    var THUMBNAIL_CONTROLS = '.container-thumbnail-controls';
12    var bound = false;
13
14    function changeThumbnailCaption(component, carouselItemsEle, index) {
15        var carouselItemEle = carouselItemsEle.querySelectorAll('.thumbnail-item');
16        var item = carouselItemEle[index];
17        if (!item) return;
18        var caption = item.getAttribute('data-thumbnail-caption');
19        var captionSpan = component.querySelector('.container-thumbnail-caption span');
20        if (captionSpan && caption) captionSpan.textContent = caption;
21    }
22
23    function onArrowClick(e) {
24        var arrow = e.target.closest(COMPONENT + ' ' + THUMBNAIL_CONTROLS + ' .container-icon-arrow');
25        if (!arrow || arrow.classList.contains('disabled')) return;
26
27        var icon = arrow.querySelector('.g-icon-arrow');
28        if (!icon) return;
29
30        var component = arrow.closest(COMPONENT);
31        if (!component) return;
32
33        var carouselItemsEle = component.querySelector(THUMBNAIL_ITEMS);
34        if (!carouselItemsEle) return;
35
36        var carouselItemEle = carouselItemsEle.querySelectorAll('.thumbnail-item');
37        var currentIndex = parseInt(carouselItemsEle.getAttribute('data-current_index') || '0', 10);
38        var nextIndex = currentIndex;
39        var lastIndex = carouselItemEle.length - 1;
40        var controls = arrow.closest(THUMBNAIL_CONTROLS);
41
42        if (icon.classList.contains('g-icon-arrow-left')) {
43            if (controls) {
44                controls.querySelectorAll('.container-icon-arrow').forEach(function (el) {
45                    el.classList.remove('disabled');
46                });
47            }
48            nextIndex = currentIndex - 1;
49            if (nextIndex <= 0) {
50                nextIndex = 0;
51                arrow.classList.add('disabled');
52            }
53        } else if (icon.classList.contains('g-icon-arrow-right')) {
54            if (controls) {
55                controls.querySelectorAll('.container-icon-arrow').forEach(function (el) {
56                    el.classList.remove('disabled');
57                });
58            }
59            nextIndex = currentIndex + 1;
60            if (nextIndex >= lastIndex) {
61                nextIndex = lastIndex;
62                arrow.classList.add('disabled');
63            }
64        } else {
65            return;
66        }
67
68        carouselItemsEle.style.marginLeft = (nextIndex * -100) + '%';
69        carouselItemsEle.setAttribute('data-current_index', String(nextIndex));
70        changeThumbnailCaption(component, carouselItemsEle, nextIndex);
71    }
72
73    function bind() {
74        if (bound) return;
75        bound = true;
76        document.addEventListener('click', onArrowClick, true);
77    }
78
79    bind();
80
81    return {
82        event: bind,
83    };
84})();