https://www.west-dunbarton.gov.uk/scripts/hero-carousel.js?d=639255793602714753

1$(document).ready(function () {
2    // Initialize Slick carousel
3    const $carousel = $('.hero-carousel__slides').slick({
4        slidesToShow: 1,
5        slidesToScroll: 1,
6        arrows: false,
7        dots: false,
8        autoplay: true,
9        autoplaySpeed: 5000,
10        pauseOnHover: false,
11        infinite: true,
12    });
13
14    // Get the total number of slides after Slick has initialized
15    const totalSlides = $carousel.slick('getSlick').slideCount;
16
17    // Find the position where we want to insert the dots (after prev button)
18    const $prevButton = $('.hero-carousel__button--prev');
19
20    // Generate dots dynamically based on the number of slides
21    for (let i = 0; i < totalSlides; i++) {
22        const $dot = $('<button></button>')
23            .addClass('hero-carousel__dot')
24            .attr('data-slide', i)
25            .text(i + 1);
26
27        // Insert the dot after the previous button or after the last dot
28        if (i === 0) {
29            $dot.insertAfter($prevButton);
30        } else {
31            $dot.insertAfter($('.hero-carousel__dot').last());
32        }
33    }
34
35    // Update active dot on slide change
36    $carousel.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
37        $('.hero-carousel__dot').removeClass('hero-carousel__dot--active');
38        $(`.hero-carousel__dot[data-slide="${nextSlide}"]`).addClass('hero-carousel__dot--active');
39    });
40
41    // Set initial active dot
42    $('.hero-carousel__dot[data-slide="0"]').addClass('hero-carousel__dot--active');
43
44    // Previous button click
45    $('.hero-carousel__button--prev').on('click', function () {
46        $carousel.slick('slickPrev');
47    });
48
49    // Next button click
50    $('.hero-carousel__button--next').on('click', function () {
51        $carousel.slick('slickNext');
52    });
53
54    // Dot navigation - using event delegation since dots are added dynamically
55    $('.hero-carousel__controls').on('click', '.hero-carousel__dot', function () {
56        const slideIndex = $(this).data('slide');
57        $carousel.slick('slickGoTo', slideIndex);
58    });
59
60    // Play/Pause button
61    let isPlaying = true;
62    $('.hero-carousel__button--pause-play').on('click', function () {
63        if (isPlaying) {
64            $carousel.slick('slickPause');
65            $(this).addClass('is-paused');
66        } else {
67            $carousel.slick('slickPlay');
68            $(this).removeClass('is-paused');
69        }
70        isPlaying = !isPlaying;
71    });
72});