https://traffic.wales/modules/custom/trafficwales_live_traffic_alerts/js/alerts.js?v=1

1/**
2 * @file
3 */
4
5(function ($, Drupal) {
6
7  Drupal.behaviors.alerts = {
8
9    addSlideshow: function () {
10      var breakpoints = drupalSettings.responsive.breakpoints;
11      // Get live references to all the breakpoints.
12      var xs = window.matchMedia(breakpoints["gel2.xs"]);
13      var sm = window.matchMedia(breakpoints["gel2.sm"]);
14      var md = window.matchMedia(breakpoints["gel2.md"]);
15      var lg = window.matchMedia(breakpoints["gel2.lg"]);
16
17      $slideshow = $('.live-traffic-alerts__slideshow');
18
19      $slideshow.on('init', function (event, slick) {
20
21        slideCount = slick.slideCount;
22        setSlideCount(Math.ceil(slideCount / slick.slickGetOption('slidesToShow')));
23        setCurrentSlideNumber(1);
24      });
25
26
27      $slideshow.not('.slick-initialized').slick({
28        infinite: true,
29        slidesToShow: 3,
30        slidesToScroll: 3,
31        dots: false,
32        nextArrow: '<button class="next" title="' +  Drupal.t("Next camera image") + '"><i class="gel-icon gel-icon-chevron-right"></i></button>',
33        prevArrow: '<button class="prev" title="' +  Drupal.t("Previous camera image") + '"><i class="gel-icon gel-icon-chevron-left"></i></button>',
34        appendArrows: '.slide-count-wrap',
35        // the magic
36        responsive: [{
37
38          breakpoint: 1000,
39          settings: {
40            slidesToShow: 3,
41            slidesToScroll: 3,
42            infinite: true,
43            dots: false
44          }
45
46        }, {
47
48          breakpoint: 900,
49          settings: {
50            slidesToShow: 3,
51            slidesToScroll: 3,
52            dots: false
53          }
54
55        }, {
56
57          breakpoint: 600,
58          settings: {
59            slidesToShow: 2,
60            slidesToScroll: 2,
61            dots: false
62          }
63        }, {
64
65          breakpoint: 480,
66          settings: {
67            slidesToShow: 1,
68            slidesToScroll: 1,
69            dots: false
70          }
71
72        }]
73      });
74
75
76      $slideshow.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
77        setCurrentSlideNumber(nextSlide / $slideshow.slick('slickGetOption', 'slidesToShow') + 1);
78        setSlideCount(Math.ceil(slideCount / $slideshow.slick('slickGetOption', 'slidesToShow')))
79      });
80
81      function setSlideCount(slideCount) {
82
83
84        var $el = $('.slide-count-wrap').find('.total');
85        $el.text(slideCount);
86      }
87
88      function setCurrentSlideNumber(currentSlide) {
89
90        var $el = $('.slide-count-wrap').find('.current');
91        $el.text(currentSlide);
92      }
93
94
95    },
96
97    attach: function (context, settings) {
98      Drupal.behaviors.alerts.addSlideshow();
99    }
100  }
101
102})(jQuery, Drupal);