https://opentrons.com/wp-content/themes/timberland/theme/blocks/videoslider/videoslider.js?ver=1.8.5

1$(document).ready(function() {
2  const slides = document.querySelectorAll('.slide-vid');
3  const dotsContainer = document.querySelector('.dots');
4
5  // Clear existing dots (if any)
6  dotsContainer.innerHTML = '';
7
8  // Create dots dynamically
9  slides.forEach((_, index) => {
10    const dot = document.createElement('span');
11    dot.classList.add('dot');
12    if (index === 0) {
13      dot.classList.add('active');
14    }
15    dotsContainer.appendChild(dot);
16  });
17
18  let currentSlide = 0;
19  let autoplayInterval;
20
21  function showSlide(n) {
22    slides.forEach((slide, index) => {
23      slide.style.display = 'none';
24      dots[index].classList.remove('active');
25
26      // Add the no-lazy class to all images within the slide
27      const images = slide.querySelectorAll('img');
28      images.forEach(img => {
29        img.classList.add('no-lazy');
30      });
31    });
32
33    slides[n].style.display = 'block';
34    dots[n].classList.add('active');
35
36    currentSlide = n;
37  }
38
39  const dots = document.querySelectorAll('.dot');
40
41  // Event listeners for the dots
42  dots.forEach((dot, index) => {
43    dot.addEventListener('click', () => {
44      showSlide(index);
45      pauseAutoplay();
46    });
47  });
48
49  // Function to show the next slide
50  function nextSlide() {
51    currentSlide = (currentSlide + 1) % slides.length;
52    showSlide(currentSlide);
53  }
54
55  // Autoplay function
56  function startAutoplay() {
57    autoplayInterval = setInterval(nextSlide, 5000); // Adjust interval as needed
58  }
59
60  function pauseAutoplay() {
61    clearInterval(autoplayInterval);
62  }
63
64  // Event listener for the play button
65  $(document).on('click', '.slide-vid .slide-inside a', function(event) {
66    event.preventDefault();
67
68    const videoUrl = $(this).attr('href');
69    const modalId = $(this).data('modal-id');
70
71    const iframe = $(`#${modalId} iframe`);
72    iframe.attr('src', videoUrl);
73    $(`#${modalId}`).addClass('show');
74
75    // Autoplay the video in the iframe after a short delay
76    iframe.on('load', function() {
77      //  Check for YouTube iframe specifically
78      if (videoUrl.includes('youtube.com/embed/')) {
79        const iframeWindow = iframe.get(0).contentWindow;
80        try {
81          iframeWindow.postMessage({ event: 'command', func: 'playVideo', args: [] }, '*');
82        } catch (error) {
83          console.error('Error autoplaying iframe video:', error);
84        }
85      } else {
86        // Handle autoplay for other iframe sources (if needed)
87      }
88    });
89
90    pauseAutoplay();
91  });
92
93  // Event listener for the close button
94  $(document).on('click', '.modal-vid .close', function() {
95    $(this).closest('.modal-vid').removeClass('show');
96    $(this).closest('.modal-vid').find('iframe').attr('src', '');
97
98    startAutoplay();
99  });
100
101  // Apply no-lazy class to initial images on load

102  slides.forEach(slide => {
103    const images = slide.querySelectorAll('img');
104    images.forEach(img => {
105      img.classList.add('no-lazy');
106    });
107  });
108
109  showSlide(currentSlide); // Ensure the first slide's images also get the class on initial load
110  startAutoplay();
111});