Slick - карусель бренды

by serg_x

HTML

<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css">
<div class="global_wr">
<div class="brand_icon_slider_wr">
  <h2 class="font_t2">Бренды с которыми мы работаем</h2>
  <div class="brand_icon_slider">
    <div class="item"><a href="#"><img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt=""></a></div>
    <div class="item"><a href="#"><img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt=""></a></div>
    <div class="item"><a href="#"><img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt=""></a></div>
    <div class="item"><a href="#"><img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt=""></a></div>
    <div class="item"><a href="#"><img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt=""></a></div>
  </div>
</div>  
</div>

CSS

.global_wr{
  padding: 20px 50px;
  background-color: #f8fbfe;
}

.brand_icon_slider .item{
  display:flex !important;
	justify-content: center;
	align-items: center;
  height: 81px;
  background-color: #fff;
  border:1px solid #e6edf3;
  border-radius:3px;
  padding: 5px;
}
.brand_icon_slider .item img{
  max-width: 100%;
}
.brand_icon_slider .slick-slide {
  margin: 0 10px;
}
.brand_icon_slider .slick-list {
  margin: 0 -10px;
}

JavaScript

$('.brand_icon_slider').slick({
  slidesToShow: 5,
  slidesToScroll: 2,
  arrows: true,
  dots: false,
  infinite: true,
  autoplay: false
});