Слайдер переполняет страницу

Question

Кто-нибудь может мне немного помочь? Я вставил этот логотип-слайдер на свою страницу, и он работает хорошо, но из-за «базовых» настроек ширины движка веб-сайта модули не имеют полной ширины на странице.

Я хотел, чтобы ползунок был на всю ширину экрана, поэтому я сделал его переполненным следующим кодом:

customcontent5> div.module-body {overflow: visible;}

Но этот код заставляет ползунок вытекать из экрана, и страница автоматически прокручивается при движении ползунка. Как мне подогнать размер слайдера под ширину страницы? (а не основная тонкая ширина, где все остальные модули есть)

Спасибо за вашу помощь,

Код:

$(document).ready(function() {
  $('.customer-logos').slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 4
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 3
      }
    }]
  });
});

/* Slider */

.slick-slide {
  margin: 0!important;
}

.slick-slide img {
  width: 85%;
  height: 85%;
  display: block;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-callout: none;
  touch-action: pan-y;
  tap-highlight-color: transparent;
  margin: 0!important;
  max-width: 990px!important;
}

.slick-list {
  position: relative;
  display: block;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

<div class="container">
  <section class="customer-logos slider">
    <div class="slide"><img src="images/image1.png"></div>
    <div class="slide"><img src="images/image2.png"></div>
    <div class="slide"><img src="images/image3.png"></div>
    <div class="slide"><img src="images/image4.png"></div>
    <div class="slide"><img src="images/image5.png"></div>
    <div class="slide"><img src="images/image6.png"></div>
    <div class="slide"><img src="images/image7.png"></div>
    <div class="slide"><img src="images/image8.png"></div>
  </section>
</div>


<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Answer 1

Сделать это как переполнение: выделите .slick-list {в вашем css-файле и отметьте ..