1document.addEventListener("DOMContentLoaded", function() { 2 // glider compact view 3 if(document.querySelector('.perf-compact')){ 4 // The general slider settings for the block. 5 const selectorSlider = '.perf-slider-logo-container .slider-wrapper-compact'; 6 const classDots = 'perf_dots'; 7 const classPrev = 'perf_arrow_prev'; 8 const classNext = 'perf_arrow_next'; 9 const sliders = document.querySelectorAll(selectorSlider); 10 // console.log(sliders); 11 const sliderBreakpoint = 768; // Medium breakpoint from Bootstrap. 12 13 const delay = 4000 // Override from block settings. 14 const autoplayRepeat = true 15 16 // Only create the slider when the query selector finds the elements. 17 // @link https://sebhastian.com/javascript-check-if-element-exists 18 if (!sliders) 19 return 20 21 // Initialize each block. 22 // Don't loop with a "for...in", it will trigger an error!! 23 Object.values(sliders).map((slider, index) => { 24 25 // Don't initialize without even a single element. 26 if (sli
26der.childElementCount < 1) 27 return 28 // console.log(slider.parentElement.getElementsByClassName(classDots)); 29 // The specific slider settings for the block. 30 31 const slidesAmountDesktop = 3 32 const slidesAmountMobile = 1 33 34 // const slidesAmountDesktop = 1; 35 // console.log(slidesAmountDesktop); 36 const slidesToShowDesktop = slidesAmountDesktop 37 const slidesToScrollDesktop = 1 38 const slidesToShowMobile = slidesAmountMobile 39 const slidesToScrollMobile = slidesAmountMobile 40 const autoplayAmount = (window.innerWidth > sliderBreakpoint) ? slidesAmountDesktop : 1 // TODO: This is not responsive for now. 41 42 let gliderSlider = initSlider(slider, slidesToShowMobile, slidesToScrollMobile, slidesToShowDesktop, slidesToScrollDesktop) 43 44 // Only enable the autoplay on desktop. 45 // if (window.innerWidth > sliderBreakpoint) 46 // sliderAutoplay(gliderSlider, slider, autoplayAmount, delay, autoplayRepeat) 47 48 49 }) 50 51 // Initialize the slider. 52 // @link https://www.cssscript.com/carousel-scroller-glider 53 function initSlider (slider, slidesToShowMobile =2, slidesToScrollMobile = 2, slidesToShowDesktop = 4, slidesToScrollDesktop = 4) { 54 return new Glider(slider, { 55 // The "auto" argument allows automatic responsive width calculations. 56 slidesToShow: slidesToShowMobile, 57 slidesToScroll: slidesToScrollMobile, 58 59 // If we use the property "itemMinWidth" the slides grow to fit the container viewport. 60 // It is ignored unless "slidesToShow" is set to "auto". 61 itemWidth: undefined, 62 63 // If true, slides won't be resized to fit the viewport. 64 // It requires "itemWidth" to be set (this may cause fractional slides). 65 exactWidth: false, 66 67 // The speed aggravator (higher is slower). 68 duration: .5, 69 70 // The dot container selector (it auto selects the right element dynamically). 71 // @link https://github.com/NickPiscitelli/Glider.js/issues/41 72 dots: slider.parentElement.getElementsByClassName(classDots)[0], 73 74 // The prev/next container selector (it auto selects the right element dynamically). 75 arrows: { 76 prev: slider.parentElement.getElementsByClassName(classPrev)[0], 77 next: slider.parentElement.getElementsByClassName(classNext)[0] 78 }, 79 80 // Enable mouse dragging (on mobile it's always on). 81 // TODO: It does not work on Android (try to update glider.js to 1.7.6). 82 draggable: true, 83 84 // How much to scroll with each mouse delta. 85 dragVelocity: 1.4, 86 87 // Use any custom easing function compatible with most easing plugins. 88 easing: function (x, t, b, c, d) { 89 return c * (t /= d) * t + b 90 }, 91 92 // The event controller. 93 scrollPropagate: false, 94 eventPropagate: true, 95 96 // Force centering slides after the scroll event. 97 scrollLock: true, 98 99 // How long to wait after the scroll event before locking. 100 // If it's too low, it might interrupt normal scrolling. 101 scrollLockDelay: 150, 102 103 // Force centering the slides after the resize event. 104 resizeLock: true, 105 106 // The slider breakpoints (mobile-first approach). 107 // If bigger than breakpoint, override with the following rule below. 108 responsive: [ 109 { 110 breakpoint: sliderBreakpoint, 111 settings: { 112 slidesToShow: slidesToShowDesktop, 113 slidesToScroll: slidesToScrollDesktop 114 } 115 } 116 ] 117 }) 118 } 119 120 121 // Enable slider autoplay. 122 // @link https://stackoverflow.com/questions/62122998/implementing-autoplay-on-glider-js 123 function sliderAutoplay (glider, slider, amount, delay = 3000, repeat = true) { 124 let pause = false // Determine the autoplay status. 125 let autoplay = null // Variable reference to setInterval(). 126 let nextIndex = amount // The next index element to jump to. 127 const slidesCount = glider.track.childElementCount // How many elements are available. 128 129 slide() 130
131 // The element is always bound to the relative parent container. 132 let element = slider.parentElement 133 134 // Stop the autoplay. 135 element.addEventListener('mouseover', (event) => { 136 if (true === pause) 137 return 138 139 clearInterval(autoplay) 140 pause = true 141 }, 300) 142 143 // Resume the autoplay. 144 element.addEventListener('mouseout', (event) => { 145 if (false === pause) 146 return 147 148 slide() 149 pause = false 150 }, 300) 151 152 // Watch for manual slide changes through the dots. 153 // @link https://stackoverflow.com/questions/50643302/addeventlistener-on-a-queryselectorall-with-classlist 154 const dots = element.querySelectorAll('div.perf-slider-news-dots button') 155 dots.forEach(dot => { 156 dot.addEventListener('click', () => { 157 nextIndex = parseInt(dot.dataset.index) + amount 158 }) 159 }) 160 const arrows = element.querySelectorAll('div.slider-button-arrows-wrapper button') 161 arrows.forEach(arrow => { 162 arrow.addEventListener('click', () => { 163 nextIndex = parseInt(arrow.dataset.index) + amount 164 }) 165 }) 166 167 function slide () { 168 autoplay = setInterval(() => { 169 if (nextIndex >= slidesCount) { 170 if (!repeat) clearInterval(autoplay) 171 else nextIndex = 0 172 } 173 174 glider.scrollItem(nextIndex) 175 nextIndex = nextIndex + amount 176 }, delay) 177 } 178 } 179 180 } 181 182 if(document.querySelector('.perf-carousel')){ 183 // The general slider settings for the block. 184 const selectorSlider = '.perf-slider-logo-container .slider-wrapper-carousel'; 185 const classDots = 'perf_dots'; 186 const classPrev = 'perf_arrow_prev'; 187 const classNext = 'perf_arrow_next'; 188 const sliders = document.querySelectorAll(selectorSlider); 189 // console.log(sliders); 190 const sliderBreakpoint = 768; // Medium breakpoint from Bootstrap. 191 192 const delay = 4000 // Override from block settings. 193 const autoplayRepeat = true 194 195 // Only create the slider when the query selector finds the elements. 196 // @link https://sebhastian.com/javascript-check-if-element-exists 197 if (!sliders) 198 return 199 200 // Initialize each block. 201 // Don't loop with a "for...in", it will trigger an error!! 202 Object.values(sliders).map((slider, index) => { 203 204 // Don't initialize without even a single element. 205 if (slider.childElementCount < 1) 206 return 207 // console.log(slider.parentElement.getElementsByClassName(classDots)); 208 // The specific slider settings for the block. 209 210 const slidesAmountDesktop = 1 211 const slidesAmountMobile = 1 212 213 // const slidesAmountDesktop = 1; 214 // console.log(slidesAmountDesktop); 215 const slidesToShowDesktop = slidesAmountDesktop 216 const slidesToScrollDesktop = slidesAmountDesktop 217 const slidesToShowMobile = slidesAmountMobile 218 const slidesToScrollMobile = slidesAmountMobile 219 const autoplayAmount = (window.innerWidth > sliderBreakpoint) ? slidesAmountDesktop : 1 // TODO: This is not responsive for now. 220 221 let gliderSlider = initSlider(slider, slidesToShowMobile, slidesToScrollMobile, slidesToShowDesktop, slidesToScrollDesktop) 222 223 // Only enable the autoplay on desktop. 224 // if (window.innerWidth > sliderBreakpoint) 225 // sliderAutoplay(gliderSlider, slider, autoplayAmount, delay, autoplayRepeat) 226 227 228 }) 229 230 // Initialize the slider. 231 // @link https://www.cssscript.com/carousel-scroller-glider 232 function initSlider (slider, slidesToShowMobile =2, slidesToScrollMobile = 2, slidesToShowDesktop = 4, slidesToScrollDesktop = 4) { 233 return new Glider(slider, { 234 // The "auto" argument allows automatic responsive width calculations. 235 slidesToShow: slidesToShowMobile, 236 slidesToScroll: slidesToScrollMobile, 237 238 // If we use the property "itemMinWidth" the slides grow to fit the container viewport. 239 // It is ignored unless "slidesToShow" is set to "auto". 240 itemWidth: undefined, 241 242 // If true, slides won't be resized to fit the viewport. 243 // It requires "itemWidth" to be set (this may cause fractional slides). 244 exactWidth: false, 245 246 // The speed aggravator (higher is slower). 247 duration: .5, 248 249 // The dot container selector (it auto selects the right element dynamically). 250 // @link https://github.com/NickPiscitelli/Glider.js/issues/41 251 dots: slider.parentElement.getElementsByClassName(classDots)[0], 252 253 // The prev/next container selector (it auto selects the right element dynamically). 254 arrows: { 255 prev: slider.parentElement.getElementsByClassName(classPrev)[0], 256 next: slider.parentElement.getElementsByClassName(classNext)[0] 257 }, 258 259 // Enable mouse dragging (on mobile it's always on). 260 // TODO: It does not work on Android (try to update glider.js to 1.7.6). 261 draggable: true, 262 263 // How much to scroll with each mouse delta. 264 dragVelocity: 1.4, 265 266 // Use any custom easing function compatible with most easing plugins. 267 easing: function (x, t, b, c, d) { 268 return c * (t /= d) * t + b 269 }, 270 271 // The event controller. 272 scrollPropagate: false, 273 eventPropagate: true, 274 275 // Force centering slides after the scroll event. 276 scrollLock: true, 277 278 // How long to wait after the scroll event before locking. 279 // If it's too low, it might interrupt normal scrolling. 280 scrollLockDelay: 150, 281 282 // Force centering the slides after the resize event. 283 resizeLock: true, 284 285 // The slider breakpoints (mobile-first approach). 286 // If bigger than breakpoint, override with the following rule below.
287 responsive: [ 288 { 289 breakpoint: sliderBreakpoint, 290 settings: { 291 slidesToShow: slidesToShowDesktop, 292 slidesToScroll: slidesToScrollDesktop 293 } 294 } 295 ] 296 }) 297 } 298 299 300 // Enable slider autoplay. 301 // @link https://stackoverflow.com/questions/62122998/implementing-autoplay-on-glider-js 302 function sliderAutoplay (glider, slider, amount, delay = 3000, repeat = true) { 303 let pause = false // Determine the autoplay status. 304 let autoplay = null // Variable reference to setInterval(). 305 let nextIndex = amount // The next index element to jump to. 306 const slidesCount = glider.track.childElementCount // How many elements are available. 307 308 slide() 309 310 // The element is always bound to the relative parent container. 311 let element = slider.parentElement 312 313 // Stop the autoplay. 314 element.addEventListener('mouseover', (event) => { 315 if (true === pause) 316 return 317 318 clearInterval(autoplay) 319 pause = true 320 }, 300) 321 322 // Resume the autoplay. 323 element.addEventListener('mouseout', (event) => { 324 if (false === pause) 325 return 326 327 slide() 328 pause = false 329 }, 300) 330 331 // Watch for manual slide changes through the dots. 332 // @link https://stackoverflow.com/questions/50643302/addeventlistener-on-a-queryselectorall-with-classlist 333 const dots = element.querySelectorAll('div.perf-slider-news-dots button') 334 dots.forEach(dot => { 335 dot.addEventListener('click', () => { 336 nextIndex = parseInt(dot.dataset.index) + amount 337 }) 338 }) 339 const arrows = element.querySelectorAll('div.slider-button-arrows-wrapper button') 340 arrows.forEach(arrow => { 341 arrow.addEventListener('click', () => { 342 nextIndex = parseInt(arrow.dataset.index) + amount 343 }) 344 }) 345 346 function slide () { 347 autoplay = setInterval(() => { 348 if (nextIndex >= slidesCount) { 349 if (!repeat) clearInterval(autoplay) 350 else nextIndex = 0 351 } 352 353 glider.scrollItem(nextIndex) 354 nextIndex = nextIndex + amount 355 }, delay) 356 } 357 } 358 359 } 360 361 362})
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.