https://starr.com/-/media/Themes/Starr/Starr/Starr-Base-Theme/Scripts/cardCarousel.js

1$(function () {
2  $('.card-carousel').each(function (index, element) {
3    // Desktop threshold for custom logic based on screen size.
4    var desktopBreakpoint = window.matchMedia('(min-width: 992px)');
5    var $module = $(element),
6        $filters = $module.find('.card-carousel__filters'),
7        numberOfFilters = $filters.children().length,
8        $carousel = $module.find(".card-carousel__slides").slick({
9      arrows: true,
10      asNavFor: $filters,
11      centerMode: true,
12      centerPadding: '8.33%',
13      prevArrow: '<a class="card-carousel__carousel-arrow card-carousel__carousel-arrow--left"><i></i></a>',
14      nextArrow: ' <a class="card-carousel__carousel-arrow card-carousel__carousel-arrow--right"><i></i></a>',
15      rows: 0,
16      responsive: [{
17        breakpoint: 992,
18        settings: {
19          arrows: false,
20          centerMode: false
21        }
22      }]
23    });
24    var filtersWidth = 0;
25    $filters.children().each(function (i, ele) {
26      filtersWidth += $(ele).width();
27    });
28    $filters.slick({
29      appendArrows: $module.find(".card-carousel__filters-controls"),
30      asNavFor: $carousel,
31      arrows: $filters.width() < filtersWidth,
32      focusOnSelect: true,
33      nextArrow: '<a class="card-carousel__filters-arrow card-carousel__filters-arrow--right" aria-label="Next"><i></i></a>',
34      prevArrow: '<a class="card-carousel__filters-arrow card-carousel__filters-arrow--left" aria-label="Previous"><i></i></a>',
35      responsive: [{
36        breakpoint: 400,
37        settings: {
38          slide: '.card-carousel__filter',
39          slidesToShow: 3
40        }
41      }, {
42        breakpoint: 992,
43        settings: {
44          centerMode: true,
45          infinite: true,
46          slide: 'div'
47        }
48      }],
49      rows: 0,
50      slidesToScroll: 1,
51      slidesToShow: numberOfFilters > 5 ? 5 : numberOfFilters,
52      variableWidth: true
53    });
54    $module.find(".card-carousel__viewall a").click(function (e) {
55      e.stopPropagation();
56    });
57    $(window).on("resize load", resizeCarousel);
58
59    function resizeCarousel() {
60      if (desktopBreakpoint.matches) {
61        $filters.css({
62          //to get the carousel to center, get width of filters plus padding and set as max-width.
63          'max-width': $module.width() > filtersWidth ? filtersWidth + 34 * numberOfFilters + 'px' : 'calc(100% - 108px)'
64        });
65      } else {
66        $filters.css({
67          'max-width': 'xxx' //throw a junk value in so that it inherits from previous rule.  hacky, but no other values seem to work
68
69        });
70      }
71
72      $filters.slick("refresh");
73    }
74  });
75});