https://rspo.org/wp-content/themes/rspo/blocks/block-article-slider.js?ver=2026.06.29.1

1jQuery(function ($) {
2  $(".article-slider").each(function () {
3    var $block = $(this);
4    var $sliderMask = $block.find(".w-slider-mask");
5    var $sliderNav = $block.find(".slider-nav");
6    var $prevArrow = $block.find(".slider-left").first();
7    var $nextArrow = $block.find(".slider-right").first();
8
9    if ($.fn.slick) {
10      $sliderMask.slick({
11        slidesToShow: 1,
12        slidesToScroll: 1,
13        prevArrow: $prevArrow,
14        nextArrow: $nextArrow,
15        fade: true,
16        draggable: false,
17        asNavFor: $sliderNav,
18      });
19      $sliderNav.slick({
20        slidesToShow: 3,
21        slidesToScroll: 1,
22        asNavFor: $sliderMask,
23        dots: false,
24        centerMode: false,
25        focusOnSelect: true,
26        arrows: false,
27        responsive: [
28          {
29            breakpoint: 991,
30            settings: {
31              vertical: true,
32              slidesToShow: 3,
33              slidesToScroll: 1,
34            },
35          },
36        ],
37      });
38    }
39
40    // Add background image to absolute div outside of slick slider
41    // On change of slide in slick slider change background image of absolute div
42    $sliderMask.on("afterChange", function (event, slick, currentSlide) {
43      //Get the data-background-image attribute of the current slide
44      var src = $sliderMask.find(".slick-active").attr("data-background-image");
45      //Decode the URL from base64
46      src = atob(src);
47
48      //Set the background image of the absolute div
49      if (src) {
50        $block.find(".full-width-background img").show();
51        $block.find(".full-width-background img").attr("src", src);
52      } else {
53        $block.find(".full-width-background img").attr("src", "");
54        // hide the absolute div if no image is present
55        $block.find(".full-width-background img").hide();
56      }
57    });
58
59    // Set the background image of the absolute div on page load
60    var src = $sliderMask.find(".slick-active").attr("data-background-image");
61    if (!src) {
62      $block.find(".full-width-background img").hide();
63    } else {
64      $block.find(".full-width-background img").show();
65      src = atob(src);
66      $block.find(".full-width-background img").attr("src", src);
67    }
68
69    // Set the height of the background image div to the height of the slider mask
70    if (window.innerWidth < 992) {
71      $block
72        .find(".full-width-background")
73        .height($block.find("#slider-content").height() + 50);
74    } else {
75      $block
76        .find(".full-width-background")
77        .height($block.find("#slider-content").height() + 24);
78    }
79
80    // watch for resize event and set the height of the background image div to the height of the slider mask
81    $(window).resize(function () {
82      if (window.innerWidth < 992) {
83        $block
84          .find(".full-width-background")
85          .height($block.find("#slider-content").height() + 50);
86      } else {
87        $block
88          .find(".full-width-background")
89          .height($block.find("#slider-content").height() + 24);
90      }
91    });
92  });
93});