How to make such a slider using a slick slider or maybe some other

enter image description here

I tried it this way, but it still doesn’t work out exactly like the photo

$('.data_hit__slader').slick({ centerMode: true, centerPadding: '40px', slidesToShow: 3, arrows: false, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] });

    1 answer 1

     .hit-product { background-color: #282828; padding: 80px 0; } .stitle { font-family: 'ReformaGroteskDemiC'; font-weight: 400; font-size: 48px; line-height: 22px; color: #fff; } .data_hit__slader { overflow: hidden; } h3 { margin-top: 0; padding-top: 10px; } .item { max-width: 100%; flex-basis: 100%; min-width: 400px; background-color: transparent; margin-left: 90px; margin-right: 90px; overflow: hidden; border-radius: 4%; } .data-img::before { background-color: rgba(255, 255, 255, 0.7); content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; } .slick-center .data-img::before { content: none; } .data-img { position: relative; padding-bottom: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; } @media screen and (max-width: 1200px) { .item { margin-left: 10px; margin-right: 10px; min-width: 0; } } 
     <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/style.css"> <script src="https://fastcdn.org/jQuery/2.1.4/jquery.min.js"></script> <!-- Add the slick-theme.css if you want default styling --> </head> <body> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="hit-product"> <div class="container"> <p class="stitle">Абсолютные хиты продаж</p> </div> <div class="hit__slider"> <div class="data_hit__slader"> <div class="item"> <div class="data-img" style="background-image: url(https://www.1zoom.ru/big2/595/334196-svetik.jpg);"> <div class="data-info"> <div class="hit-header"> <h3>Проект дома 7*9</h3> <span class="size">86 м<sup>2</sup></span> </div> <p class="price">641 037 р.</p> <a href="" class="btn-white">Подробнее</a> </div> </div> </div> <div class="item"> <div class="data-img" style="background-image: url(https://www.1zoom.ru/big2/595/334196-svetik.jpg);"> <div class="data-info"> <div class="hit-header"> <h3>Проект дома 7*9</h3> <span class="size">86 м<sup>2</sup></span> </div> <p class="price">641 037 р.</p> <a href="" class="btn-white">Подробнее</a> </div> </div> </div> <div class="item"> <div class="data-img" style="background-image: url(https://www.1zoom.ru/big2/595/334196-svetik.jpg);"> <div class="data-info"> <div class="hit-header"> <h3>Проект дома 7*9</h3> <span class="size">86 м<sup>2</sup></span> </div> <p class="price">641 037 р.</p> <a href="" class="btn-white">Подробнее</a> </div> </div> </div> <div class="item"> <div class="data-img" style="background-image: url(https://www.1zoom.ru/big2/595/334196-svetik.jpg);"> <div class="data-info"> <div class="hit-header"> <h3>Проект дома 7*9</h3> <span class="size">86 м<sup>2</sup></span> </div> <p class="price">641 037 р.</p> <a href="" class="btn-white">Подробнее</a> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> $('.data_hit__slader').slick({ centerMode: true, centerPadding: '25%', slidesToShow: 1, arrows: true, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '20px', slidesToShow: 1 } }, { breakpoint: 480, settings: { arrows: false, centerPadding: '5px', slidesToShow: 1 } } ] }); </script> </body> </html>

    • arrows I think you will finish) and on the mockpoints mob. you put it right, the desktop is like in the picture - Vitaly