https://www.affinalways.com/themes/demo/js/discover-promotion.js

1function setDiscoverPromotionCarousel(parentClassName) {
2    let itemClassName = "col-11 col-lg-3 col-md-6 mx-auto mx-md-0";
3    let items = parentClassName.getElementsByClassName(itemClassName);
4    let totalItems = items.length;
5    let numberProductsToDisplay;
6    let displayListStart;
7    let displayListEnd;
8    let previousdisplayListStart;
9    let previousdisplayListEnd;
10    let mobileProductsToShow;
11    let tabletProductsToShow;
12    let desktopProductsToShow;
13
14    // 0 = no continues auto wrap back to beginning
15    // 1 = auto wrap back
16    var carouselMode = 0;
17
18    // TODO: make a better checker or function if possible
19    function mediaSizeChecker() {
20        var mobile = window.matchMedia("(max-width: 767px)");
21        var tablet = window.matchMedia("(max-width: 1023px)");
22
23        displayListStart = 1;
24        mobileProductsToShow = 1;
25        tabletProductsToShow = 2;
26        desktopProductsToShow = 4;
27        previousdisplayListStart = 0;
28        previousdisplayListEnd = 0;
29
30        if (mobile.matches) { // MOBILE
31            numberProductsToDisplay = mobileProductsToShow;
32            displayListEnd = numberProductsToDisplay;
33        } else if (tablet.matches) { // TABLET
34            numberProductsToDisplay = tabletProductsToShow;
35            displayListEnd = numberProductsToDisplay;
36        } else { // DESKTOP
37            numberProductsToDisplay = desktopProductsToShow;
38            displayListEnd = numberProductsToDisplay;
39        }
40    }
41
42    function initCarousel() {
43        // Hide the buttons if displaylist is <= to total available items
44        if(totalItems <= numberProductsToDisplay) {
45            $('.carousel-button-next', parentClassName).hide();
46            $('.carousel-button-prev', parentClassName).hide();
47        }else{
48            
49            if(carouselMode == 0){
50                $('.carousel-button-prev', parentClassName).hide();
51                $('.carousel-button-next', parentClassName).show();
52            }else if(carouselMode == 1){
53                $('.carousel-button-prev', parentClassName).show();
54                $('.carousel-button-next', parentClassName).show();
55            }
56        }
57        
58        resetAllProductList();
59        displayProductList();
60    }
61
62    function displayProductList(){
63        for (let i = displayListStart; i <= displayListEnd; i++){
64            if (items[i - 1]) items[i - 1].style.display = "block";
65        }
66    }
67
68    function undisplayCurrentProductlist(){
69        for (let j = previousdisplayListStart; j <= previousdisplayListEnd; j++){
70            if (items[j - 1]) items[j - 1].style.display = "none";
71        }
72    }
73
74    function resetAllProductList(){
75        for (let x = 0; x < items.length; x++){
76            items[x].style.display = "none";
77        }
78
79    }
80
81     // Set event listeners
82    function setEventListeners() {
83        var next = parentClassName.getElementsByClassName('carousel-button-next')[0],
84            prev = parentClassName.getElementsByClassName('carousel-button-prev')[0];
85
86        next.addEventListener('click', moveNext);
87        prev.addEventListener('click', movePrev);      
88    }
89
90    function moveNext() {
91        //Set previous set of listing
92        previousdisplayListStart = displayListStart;
93        previousdisplayListEnd = displayListEnd;
94
95        //No wrap back mode
96        if (carouselMode == 0){
97            displayListStart += 1;
98            displayListEnd += 1;
99            
100            // If it is the last of the list, hide the next btn
101            if(displayListEnd >= totalItems){
102                $('.carousel-button-next', parentClassName).hide();
103            }
104
105            // If first product list is not the first one, show prev btn
106            if(displayListStart != 1){
107                $('.carousel-button-prev', parentClassName).show();
108            }
109        }else if (carouselMode == 1){ // Wrap back mode
110            // If it is the last of the list, reset back to show infront
111            if(displayListEnd >= totalItems){
112                displayListStart = 1;
113                displayListEnd = numberProductsToDisplay;
114            }else{
115                displayListStart += 1;
116                displayListEnd += 1;
117            }
118        }
119
120        undisplayCurrentProductlist();
121        displayProductList();
122    }
123
124    // Previous navigation handler
125    function movePrev() {
126        previousdisplayListStart = displayListStart;
127        previousdisplayListEnd = displayListEnd;
128
129         //No wrap back mode
130         if (carouselMode == 0){
131            displayListStart -= 1;
132            displayListEnd -= 1;
133            
134            // If it is the last of the list, hide the next btn
135            if(displayListStart <= 1){
136                $('.carousel-button-prev', parentClassName).hide();
137            }
138
139            $('.carousel-button-next', parentClassName).show();
140
141        }else if (carouselMode == 1){ // Wrap back mode
142            // If it is the last of the list, reset back to show infront
143            if(displayListStart <= 1){
144                displayListEnd = totalItems;
145                displayListStart = displayListEnd - (numberProductsToDisplay - 1);
146            }else{
147                displayListStart -= 1;
148                displayListEnd -= 1;
149            }
150        }
151
152        undisplayCurrentProductlist();
153        displayProductList();
154    }
155
156    window.addEventListener('resize', function () {
157        mediaSizeChecker();
158        initCarousel();
159    });
160
161    mediaSizeChecker();

162    initCarousel();
163    setEventListeners();
164}