AB Carousel

{% set ab_brands = get_items('authority-brands-family') %}
<section class="ab-brand-carousel lazyload" data-lazyload-scripts>
    <script type="text/lazyload" defer>
        window.cachedScript('{{ jquery_asset }}', function () {
        window.cachedScript('https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', function() {
          
        $('.brand-carousel').slick({
            infinite: false,
            slidesToShow: 5,
            slidesToScroll: 1,
            autoplay: false,
            dots: true,
            dotsClass: 'custom_paging',
            customPaging: function (slider, i) {
                //FYI just have a look at the object to find available information
                //press f12 to access the console
                //you could also debug or look in the source
                console.log(slider);
                return (i + 1) + '/' + '4';
            },
            prevArrow: '<button type="button" class="slick-prev" aria-label="Previous"><svg viewBox="0 0 24 24" data-use="/cms/svg/site/b2y9pjm25f9.24.2310051433020.svg#arrow_left"><path d="M6.407 5.538l1.339 1.351l-4.111 4.146H24v1.928H3.633l4.112 4.147l-1.339 1.351l-6.406-6.461Z"></path></svg></button>',
          nextArrow: '<button type="button" class="slick-next" aria-label="Next"><svg viewBox="0 0 24 24" data-use="/cms/svg/site/b2y9pjm25f9.24.2310051433020.svg#arrow_right"><path d="M17.594 5.539L16.255 6.889l4.111 4.146H0v1.928H20.368L16.255 17.111L17.594 18.462l6.406-6.462Z"></path></svg></button>',
            rows: 0,
              responsive: [
                {
                  breakpoint: 1280,
                  settings: {
                    slidesToShow: 4
                  }
                },
                {
                  breakpoint: 768,
                  settings: {
                    slidesToShow: 3,
                    customPaging: function (slider, i) {
                        //FYI just have a look at the object to find available information
                        //press f12 to access the console
                        //you could also debug or look in the source
                        console.log(slider);
                        return (i + 1) + '/' + '6';
                    }
                  }
                },
                {
                  breakpoint: 500,
                  settings: {
                    slidesToShow: 2,
                    customPaging: function (slider, i) {
                        //FYI just have a look at the object to find available information
                        //press f12 to access the console
                        //you could also debug or look in the source
                        console.log(slider);
                        return (i + 1) + '/' + '8';
                    }
                  }
                }
              ]
            });
            
        });
        // End Cache Script 
        });
    </script>
    <div class="st-container-md">
        
        <div class="st-section-head st-center">
            <h2>Part of the Authority Brands Family</h2>
            <p>Today, Authority Brands® owns Homewatch CareGivers®, which is headed up by President, Todd Houghton. The mission is to provide superior quality home care services, a compelling employment opportunity and to be a trusted partner within the healthcare continuum.</p>
        </div>
        <div class="brand-carousel slick-slider">
            
            {% for brand in ab_brands|sort(attribute='name') %}
            
            {% if brand.logo and brand.link %}
            <div class="lp-ab-carousel-item">
                <a href="{{ brand.link }}" target="_blank" class="lp-ab-carousel-item-inner">
                <img data-src="{{ brand.logo }}" class="lazyload" height="100" width="120"  alt="{{ brand.brand_name }} logo">
                </a>
            </div>
            {% endif %}
    
            {% endfor %}
        </div>
    </div>
    
    
</section>