https://www.iow.nhs.uk/application/blocks/image_slider/view.js?ccm…=445c4bcfa61c3f0e0efedb0a927c9f281218312e

1$(document).ready(function() {
2    function updateImageSlider(carousel) {
3        if (carousel) {
4            const slides = carousel.find('.owl-item .slide-content');
5            if (slides.length) {
6                slides.each(function() {
7                    $(this).find('.title').attr('aria-hidden', 'true');
8                    $(this).find('.desc').attr('aria-hidden', 'true');
9                    $(this).find('.read-more .button-link').attr({
10                        'aria-hidden': 'true',
11                        'tabindex': '-1'
12                    });
13                });
14            }
15            const activeSlide = carousel.find('.owl-item.active .slide-content');
16            if (activeSlide.length) {
17                activeSlide.find('.title').attr('aria-hidden', 'false');
18                activeSlide.find('.desc').attr('aria-hidden', 'false');
19                activeSlide.find('.read-more .button-link').attr({
20                    'aria-hidden': 'false',
21                    'tabindex': '0'
22                });
23            }
24        }
25    }
26
27    $('.image-slider.default').each(function() {
28        const carousel = $(this).find('.owl-carousel');
29        if (carousel.length) {
30            carousel.on('initialized.owl.carousel', function() {
31                setTimeout(function() {
32                    const dots = carousel.find('.owl-dots');
33                    dots.wrap('<div class="carousel-controls"></div>');
34
35                    // Create the pause button
36                    const pauseTemplate = carousel.prev('script[type="text/template"]');
37                    if (pauseTemplate.length) {
38                        dots.before(pauseTemplate.html());
39                        pauseTemplate.remove();
40                    }
41
42                    // Move the carousel controls to above the slides
43                    carousel.find('.owl-nav').detach().prependTo(carousel);
44                    carousel.find('.carousel-controls').detach().prependTo(carousel);
45                }, 0);
46                updateImageSlider(carousel);
47            });
48
49            carousel.on('changed.owl.carousel', function() {
50                setTimeout(function() {
51                    updateImageSlider(carousel);
52                }, 0);
53            });
54
55            // Keep pause button state on carousel resize
56            carousel.on('resized.owl.carousel', function() {
57                if (carousel.attr('data-pause-btn') === '1') {
58                    const pauseBtn = carousel.find('.carousel-controls .pause-btn');
59                    if (pauseBtn.length && pauseBtn.attr('data-state') === 'pause') {
60                        carousel.trigger('stop.owl.autoplay');
61                    }
62                }
63            });
64
65            // Carousel match height
66            carousel.on('initialized.owl.carousel resized.owl.carousel', function() {
67                const content = carousel.find('.slider-item .slide-content');
68                let maxHeight = 0;
69                content.css('min-height', '');
70                content.each(function() {
71                    const height = $(this).outerHeight();
72                    if (height > maxHeight) {
73                        maxHeight = height;
74                    }
75                });
76                content.css('min-height', maxHeight);
77            });
78
79            // Enable carousel
80            carousel.owlCarousel({
81                items: 1,
82                animateOut: 'fadeOut',
83                animateIn: 'fadeIn',
84                autoplay: carousel.attr('data-autoplay') === '1',
85                autoplayTimeout: carousel.attr('data-timeout'),
86                autoplayHoverPause: carousel.attr('data-hover') === '1',
87                autoplaySpeed: 1000,
88                dots: carousel.attr('data-dots') === '1',
89                dotsData: carousel.attr('data-dots') === '1',
90                nav: carousel.attr('data-nav') === '1',
91                navText: [
92                    '<span class="visually-hidden">Previous slide</span><i class="fas fa-chevron-left" aria-hidden="true"></i>',
93                    '<span class="visually-hidden">

93Next slide</span><i class="fas fa-chevron-right" aria-hidden="true"></i>'
94                ],
95                loop: false,
96                rewind: true,
97                mouseDrag: false,
98            });
99
100            // Pause button control
101            carousel.on('click', '.carousel-controls .pause-btn', function() {
102                if ($(this).attr('data-state') === 'play') {
103                    $(this).attr({
104                        'data-state': 'pause',
105                        'aria-label': 'Play carousel',
106                    });
107                    $(this).find('.fas').removeClass('fa-pause').addClass('fa-play');
108                    carousel.trigger('stop.owl.autoplay');
109                } else {
110                    $(this).attr({
111                        'data-state': 'play',
112                        'aria-label': 'Pause carousel',
113                    });
114                    $(this).find('.fas').removeClass('fa-play').addClass('fa-pause');
115                    carousel.trigger('play.owl.autoplay');
116                }
117            });
118
119            // Owl dots click - reset the transition timer
120            carousel.on('click', '.owl-dots .owl-dot button', function() {
121                carousel.trigger('stop.owl.autoplay');
122                const pauseBtn = carousel.find('.carousel-controls .pause-btn');
123                if (pauseBtn.length && pauseBtn.attr('data-state') === 'play') {
124                    carousel.delay(250).trigger('play.owl.autoplay');
125                }
126            });
127
128            // Font size change
129            $('.accessibility-controls').on('accessibility.fontsize.update', function() {
130                setTimeout(function() {
131                    carousel.trigger('refresh.owl.carousel');
132                }, 0);
133                setTimeout(function() {
134                    carousel.trigger('resized.owl.carousel');
135                }, 0);
136            });
137        }
138    });
139});