<div class="np-homepage-featured np-homepage-featured-items np-max-width">
    <div class="np-homepage-featured-text">
      <div class="np-homepage-headline">
        Featured Customers
      </div>
    </div>

    <div class="featured-photography-carousel np-carousel np-carousel-bg-blue" id="featured-photography-carousel">
        <div class="np-carousel-card">
            <div>
                <img src="https://s3.amazonaws.com/static.northpass.com/demos/iq-customers-1.png" alt="Featured Photography" class='customer-carousel-image'/>
            <div class="slide-label">Discovery</div>
        </div>
       
        </div>
        <div class="np-carousel-card">
        <div>
             <img src="https://s3.amazonaws.com/static.northpass.com/demos/iq-customers-2.jpeg" alt="Featured Photography" class='customer-carousel-image'/>
            <div class="slide-label">EA Sports</div>
        </div>
       
        </div>
        <div class="np-carousel-card">
            <div>
                <img src="https://s3.amazonaws.com/static.northpass.com/demos/iq-customers-3.png" alt="Featured Photography" class='customer-carousel-image'/>
                <div class="slide-label">M.A.C</div>
            </div>       
        </div>
        <div class="np-carousel-card">
        <div>
                <img src="https://s3.amazonaws.com/static.northpass.com/demos/iq-customers-4.png" alt="Featured Photography" class='customer-carousel-image'/>
            <div class="slide-label">DOMONIQUE</div>
        </div>
    
        </div>
        <div class="np-carousel-card">
        <div>
             <img src="https://s3.amazonaws.com/static.northpass.com/demos/iq-customers-5.png" alt="Featured Photography" class='customer-carousel-image'/>
            <div class="slide-label">Nespresso</div>
        </div>
       
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){

        $("#featured-photography-carousel").slick({
            slidesToShow: 3.5,
            prevArrow: '<i class="fal fa-chevron-left"></i>',
            nextArrow: '<i class="fal fa-chevron-right"></i>',
            infinite: false,
            responsive: [
                 {
                    breakpoint: 1350,
                    settings: {
                        slidesToShow: 2.3,
                    }
                },
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
            ]
        });
    });
	
</script>

<style>
   .featured-photography-carousel .fa-chevron-right::before {
       right: -6px !important;
   }
   .customer-carousel-image {
       width: 292px;
       height: 292px;
       object-fit: cover;
   }
   .featured-photography-carousel .slick-initialized .slick-slide {
        margin: 0 10px;
    }
</style>