1<!-- Slider Dot Colors-->
2<style>
3.w-slider-dot {
4  background: teal;
5}
6.w-slider-dot.w-active {
7  background: #133a27;
8}
9</style>
10
11
12<script>
13
14document.addEventListener("DOMContentLoaded", function() {
15  // Find all sliders with the cms-slider attribute
16  const sliders = document.querySelectorAll('[cms-slider]');
17
18  // Loop through each slider
19  sliders.forEach((slider) => {
20    // Get the value of the cms-slider attribute for this slider
21    const sliderAttrValue = slider.getAttribute('cms-slider');
22  
23    // Find the corresponding list based on the attribute value
24    const listElement = document.querySelector(`[cms-slider-list="${sliderAttrValue}"]`);
25  
26    // Find the mask within this slider
27    const sliderMask = slider.querySelector('.w-slider-mask');
28  
29    // If both elements are found
30    if (sliderMask && listElement) {
31      // Get the first slide as a template
32      const firstSlide = sliderMask.querySelector('.w-slide');
33  
34      // Loop through each child of the list
35      listElement.childNodes.forEach((item) => {
36        if (item.nodeType === Node.ELEMENT_NODE) {
37          // Clone the first slide
38          const newSlide = firstSlide.cloneNode(true);
39  
40          // Remove existing children from the cloned slide
41          while (newSlide.firstChild) {
42            newSlide.removeChild(newSlide.firstChild);
43          }
44  
45          // Add the content from the list item into the new slide
46          const clonedItem = item.cloneNode(true);
47          newSlide.appendChild(clonedItem);
48  
49          // Append the new slide to the slider mask
50          sliderMask.appendChild(newSlide);
51        }
52      });
53
54      // Remove the initial template slide
55      firstSlide.remove();
56  
57      // Redraw the slider to reflect the changes
58      Webflow.require('slider').redraw();
59    }
60  });
61});
62
63
64</script>