https://www.carreracup.se/app/themes/pccs/atomic/js/videoSlider.js?ver=20260525-1355

1// Category slider
2jQuery(document).ready(function( $ ) {
3
4    $('.video-cards-categories .categories').slick( {
5        arrows: false,
6        infinite: false,
7        dots: false,
8        variableWidth: true,
9    });
10});
11
12const defaultSliderOptions = {
13    type: 'slider',
14    startAt: 0,
15    perView: 6,
16    rewind: false,
17    gap: 20,
18    breakpoints: {
19        1920: {
20            perView: 6
21        },
22        1620: {
23            perView: 4
24        },/*
25        1440: {
26            perView: 4
27        }, */
28        1080: {
29            perView: 3
30        },
31        768: {
32            perView: 2
33        },
34        600: {
35            perView: 1.5
36        }
37    }
38}
39
40const calendarSliderOptions = {
41    type: 'slider',
42    startAt: 0,
43    perView: 2,
44    rewind: false,
45    gap: 60,
46    perView: 5,
47    breakpoints: {
48        1920: {
49            perView: 4,
50            gap: 60,
51        },
52        1440: {
53            perView: 4,
54            gap: 20
55        },
56        960: {
57            perView: 3.5,
58            gap: 20
59
60        },
61        600: {
62            perView: 1.5,
63            gap: 20
64        }
65    }
66}
67
68
69
70const sliderCardsSections = document.querySelectorAll('section.calendar-cards')
71
72
73sliderCardsSections.forEach(section => {
74
75    const tabButtons = section.querySelectorAll('.tab-button')
76    const sectionSliders = section.querySelectorAll('.cards-slider')
77
78
79    let activeCategory
80
81    sectionSliders[0].classList.add('active')
82
83    let sliderOptions = defaultSliderOptions
84
85    if(section.classList.contains('calendar-cards')) {
86        sliderOptions = calendarSliderOptions
87    }
88
89    let glideSlider = new Glide(`#${sectionSliders[0].id}`, sliderOptions);
90
91    // initate slider
92    if ( glideSlider ) {
93        glideSlider.mount()
94        section.classList.add('loaded')
95    }
96
97
98    // if tab buttons exist, initiate toggle
99    if(tabButtons?.length) {
100
101        activeCategory = tabButtons[0].dataset.categoryId
102        tabButtons[0].classList.add('active')
103
104        tabButtons.forEach(tabButton => {
105
106            tabButton.addEventListener('click',(event)=>{
107                event.preventDefault()
108
109                const selectedCategory = event.target.dataset.categoryId
110
111                // Do nothing if selected category is already active
112                if(selectedCategory === activeCategory) {
113                    return
114                }
115
116                tabButtons.forEach(button => {
117                    button.classList.remove('active')
118                })
119
120                event.target.classList.add('active')
121
122                if(glideSlider) {
123                    glideSlider.destroy()
124                }
125

126                sectionSliders.forEach(slider => {
127
128                    if(slider.dataset.categoryId === selectedCategory) {
129                        slider.classList.add('active')
130
131                        glideSlider = new Glide(`#${slider.id}`, sliderOptions);
132
133                        if ( glideSlider ) {
134                            glideSlider.mount();
135                        }
136
137
138                    } else {
139                        slider.classList.remove('active')
140                    }
141
142                })
143
144                activeCategory = selectedCategory
145            })
146        })
147    }
148
149})
150
151document.addEventListener("DOMContentLoaded", function () {
152  const tabs = document.querySelectorAll(".video-cards-tabs .tab .tab-button");
153  const videoCards = document.querySelectorAll(".video-card");
154
155  tabs.forEach(tab => {
156      tab.addEventListener("click", function () {
157          // Remove active class from all tabs
158          tabs.forEach(t => t.classList.remove("active"));
159          this.classList.add("active");
160
161          // Get category ID from clicked tab
162          let selectedCategory = this.getAttribute("data-category-id");
163
164          // Show only matching video cards
165          videoCards.forEach(card => {
166              if (card.id === selectedCategory) {
167                  card.style.display = "flex";
168              } else {
169                  card.style.display = "none";
170              }
171          });
172      });
173  });
174});
175