Slick slider inside slider

by head__space

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="multiple-items pt-160 justify-content-center">
            <div class="product__card">
                .like
                <div class="card-s">
                    <div class="product__shell">
                        <img class="product__picture" src="assets/img/products/pr1.jpg" alt="">
                    </div>
                    <div class="product__shell">
                        <img class="product__picture" src="assets/img/products/pr1.jpg" alt="">
                    </div>
                    <div class="product__shell">
                        <img class="product__picture" src="assets/img/products/pr1.jpg" alt="">
                    </div>

                </div>
                <span class="product__name">Рюкзак</span>
                <div class="product__mp">
                    <span class="product__model">Модель 464</span>
                    <span class="product__price">5400 Р</span>
                </div>
            </div>
            <div class="product__card">
                .like
                <div class="card-s">
                    <div class="product__shell">
                        <img class="product__picture" src="assets/img/products/pr1.jpg" alt="">
                    </div>
                    <div class="product__shell">
                        <img class="product__picture" src="assets/img/products/pr1.jpg" alt="">
                    </div>
                    <div class="product__shell">
                        <img class="product__picture" src="assets/img/products/pr1.jpg" alt="">
                    </div>

                </div>
                <span class="product__name">Рюкзак</span>
                <div class="product__mp">
                    <span...

CSS

.slick-slide {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.product__card {
  background: yellow;
  width: 100%;
  max-width: 480px;
}

.card-s {
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.product__picture {
  width: 100%;
  max-width: 480px;
  height: 200px;
  background: green;
}

.product__name {
  padding-top: 40px;
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  color: #868686;
  padding-left: 40px;
}

.product__model {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  color: #1D1D1D;
  list-style: none;
}

.product__price {
  font-family: 'SangBleu Kingdom';
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  color: #1D1D1D;
}

.product__mp {
  display: flex;
  justify-content: space-between;
  padding: 13px 40px 40px;
}

.product__like {
  padding: 40px 0 40px 40px;
}

JavaScript

$(document).ready(function(){
    $('.multiple-items').slick({
        infinite: false,
        arrows: false,
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: false,
        responsive: [
            {
                breakpoint: 780,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 400,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
    $('.card-s').slick({
        infinite: true,
        arrows: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true
    });
});