Product Slider & Carousel

index.html

<div class="container">
    <div class="product-slider">
        <div class="product-slider__category">
            <h1>Product Category</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus sit amet augue vel scelerisque. Sed cursus lorem sit amet varius hendrerit. Integer venenatis mollis ipsum. Sed dapibus iaculis ex, non vestibulum tellus fringilla
                sed. Maecenas eget molestie tellus.</p>
            <a href="#">See all products</a>
        </div>
        <div class="product-slider__slider">
            <div class="product-slider__item">
                <img src="https://via.placeholder.com/175x250">
                <h3>greens+ whole body</h3>
                <small>3 flavours / 4 sizes</small>
            </div>

            <div class="product-slider__item">
                <a href="">
                <img src="https://via.placeholder.com/175x250">
                <h3>greens+ whole body</h3>
                <small>3 flavours / 4 sizes</small>
                </a>
            </div>

            <div class="product-slider__item">
                <img src="https://via.placeholder.com/175x250">
                <h3>greens+ whole body</h3>
                <small>3 flavours / 4 sizes</small>
            </div>

            <div class="product-slider__item">
                <img src="https://via.placeholder.com/175x250">
                <h3>greens+ whole body</h3>
                <small>3 flavours / 4 sizes</small>
            </div>

            <div class="product-slider__item">
                <img src="https://via.placeholder.com/175x250">
                <h3>greens+ whole body</h3>
                <small>3 flavours / 4 sizes</small>
            </div>
        </div>
    </div>
</div>

product-slider-carousel.markdown

Product Slider & Carousel

A Pen by Cole Brown on CodePen.

License.

script.js

$(".product-slider__slider").slick({
    infinite: false,
    nextArrow: '<button type="button" class="slick-next">></button>',
    prevArrow: '<button type="button" class="slick-prev"><</button>',
    slidesToShow: 3,
    slidesToScroll: 1,
    swipeToSlide: true,
    touchThreshold: 10,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 650,
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 475,
            settings: {
                slidesToShow: 1
            }
        }
    ]
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

style.scss

* {
    box-sizing: border-box;
}

.container {
    margin: 0 auto;
    max-width: 1200px;
}

.product-slider {
    align-items: flex-start;
    background: #eee;
    display: flex;
    flex-flow: row wrap;
    
    @media (min-width: 768px) {
        flex-flow: row nowrap;
    }
}

.product-slider__category {
    padding: 20px;
    width: 100%;
    
    @media (min-width: 768px) {
        width: 35%;
    }
}

.product-slider__slider {    
    width: 100%;
    
    @media (min-width: 768px) {
        width: 65%;
    }

    .slick-list {
        padding-right: 80px;
        position: relative;
    }
}

.product-slider__item {
    display: inline-block;
    padding: 20px;
    text-align: center;

    img {
        border: 1px solid #000;
        margin: 0 auto;
    }
    
    &:hover {
        background: rgba(0,0,0,.15);
    }
}

// Slick Styles
.slick-arrow {
    background: #97CC55;
    border: 0;
    color: #fff;
    padding: 10px 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    
    &.slick-prev {
        left: 0;
    }
    
    &.slick-next {
        right: 0;
    }
    
    &.slick-disabled {
        display: none !important; //overrides slick defaults
    }
} 

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />