滑块溢出页面

Question

有人可以帮助我吗？我将What is the difference between float and double?徽标滑块插入到页面中，效果很好，但是由于网站引擎的“基本”宽度设置，这些模块基本上在页面上没有完整宽度。

我想使滑块全屏显示，所以我用以下代码使其溢出：

customcontent5> div.module-body {溢出：可见；}

但是此代码使滑块流出屏幕，并且页面随着滑块的移动自动滚动。如何使滑块大小适合页面宽度？ （而不是其他所有模块的基本宽度）

谢谢您的帮助，

代码：

$(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

将其设为溢出：在css文件中的.slick-list {滚动并检查..