https://uct.ac.za/themes/custom/blip_uct/js/album.overlay.js?v=1.x

1/**
2 * @file
3 * Album
4 *
5 */
6(function ($, Drupal) {
7  Drupal.behaviors.albumOverlay = {
8    attach: function (context, settings) {
9
10      $("#slide-main").each(function () {
11        var pagingCounter = $("#paging-info");
12        var slickMain = $(this);
13        var slickThumbnails = $("#slide-thumbnails");
14  
15        slickMain.on(
16          "init reInit afterChange",
17          function (event, slick, currentSlide, nextSlide) {
18            //console.log(currentSlide);
19            if (typeof currentSlide == "undefined") {
20              const urlParams = new URLSearchParams(window.location.search);
21              currentSlide = parseInt(urlParams.get("slide")) - 1;
22            }
23  
24            var i = (currentSlide ? currentSlide : 0) + 1;
25            pagingCounter.text(i + "/" + slick.slideCount);
26          }
27        );
28  
29        // prevent iframe content from playing when transitioning slides
30        slickMain.on(
31          "beforeChange",
32          function (event, slick, currentSlide, nextSlide) {
33            var current = $(slick.$slides[currentSlide]);
34            current.html(current.html());
35          }
36        );
37  
38        const urlParams = new URLSearchParams(window.location.search);
39        var currentSlide = urlParams.get("slide");
40        var toggleLabel = urlParams.get("content");
41        const slideIndex = currentSlide - 1;
42        // console.log('hide labels: ' + toggleLabel);
43        if (toggleLabel === '1') {
44          $(".media__content").addClass('visually-hidden');
45          $(".media-caption").addClass('visually-hidden');
46        }
47
48        slickMain.slick({
49          initialSlide: slideIndex,
50          slidesToShow: 1,
51          slidesToScroll: 1,
52          arrows: false,
53          fade: true,
54          adaptiveHeight: false,
55          mobileFirst: true,
56          draggable: false,
57        });
58  
59        slickMain.on("init", function (event, slick) {
60          pagingCounter.appendTo(".slick-list");
61        });
62  
63        slickThumbnails.slick({
64          //slidesToShow: 1,
65          //slidesToScroll: 1,
66          initialSlide: slideIndex,
67          arrows: true,
68          asNavFor: $(this),
69          focusOnSelect: true,
70          draggable: false,
71          variableWidth: true,
72          infinite: true,
73          centerMode: false,
74          //centerPadding: '40px',
75        });
76      });
77
78    },
79  };
80})(jQuery, Drupal);