Featured Products

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.featured-products {
    margin-top: 5rem;

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;

        @include media-breakpoint-down(sm) {
            margin-bottom: 1rem;
        }
        h2 {
            margin: 0;
        }
    }
    .products {
        margin-bottom: 3rem;
    }
}

.carousel-controls {
    display: flex;

    a {
        svg {
            color: #979797;
            display: block;
            transition: color 0.3s ease-in-out;

            @include media-breakpoint-down(xs) {
                width: 20px;
                height: 20px;
            }
        }
        &.prev {
            svg {
                transform: rotate(90deg);
            }
        }
        &.next {
            margin-left: 1.5rem;

            svg {
                transform: rotate(-90deg);
            }
        }
        &:hover {
            svg {
                color: $red;
            }
        }
    }
}

ul.products.products-carousel {
    flex-wrap: nowrap;
    overflow: hidden;

    li {
        width: calc(33.333% - 1.5rem);
        flex-shrink: 0;
    }
}

jQuery(function($){
    
    $('.js-products-carousel').slick({
        speed: 1000,
        autoplay: false,
        centerMode: false,
        infinite: true,
        arrows: false,
        buttons: false,
        pauseOnHover: false,
        variableWidth: false,
        slidesToShow: 3,
        rows: 0,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 2,
            }
          }
        ]
    });

    $('.js-carousel-prev').click(function(e) {
        e.preventDefault();
        $(this).parents('.featured-products').find('.js-products-carousel').slick('slickPrev');
    });
    $('.js-carousel-next').click(function(e) {
        e.preventDefault();
        $(this).parents('.featured-products').find('.js-products-carousel').slick('slickNext');
    });

});