(($) => {

  $(() => {
    const $logoCarousel = $('.logo-carousel__wrapper');

    if ($logoCarousel.length && $logoCarousel.find('.logo-carousel__image').length > 1) {
      $logoCarousel.each(function() {
        const $thisCarousel = $(this);
        const slidesToShow = $thisCarousel.data('slides-to-show');

        const slickSettings = {
          rows: 0,
          infinite: true,
          autoplay: true,
          autoplaySpeed: 2500,
          slidesToShow: slidesToShow || 5,
          slidesToScroll: slidesToShow || 1,
          prevArrow: `<a role="button" class="slick-prev text-primary"><span class="visually-hidden">Previous</span></a>`,
          nextArrow: `<a role="button" class="slick-next text-primary"><span class="visually-hidden">Next</span></a>`,
          responsive: [
            {
              breakpoint: 767,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
              }
            },
          ],
        };

				const slickSettingsPlusArrows = $.extend({}, slickSettings, {
          appendArrows: $thisCarousel.next(".slick-arrows"),
        });

        $thisCarousel.slick(slickSettingsPlusArrows);
      });
    }
  });
})(jQuery);