Question

我正在尝试制作Slick滑块。一切正常，但宽度变得疯狂。我试图让它顺流而下。基本上我把一切都花光了，但没有运气。我可以看到实际的问题是这条滑轨，但是无论我尝试什么，我都无法解决。我在互联网上搜索了很多内容，但是没有很好的答案。

<section class="slider-box">
<div class="movie-tape">
  <div class="top-bar bar">
    <ul>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
    </ul>
  </div>
  <div class="slider">
    <div class="slide" style="background-image: url(./images/sonic-slide.jpeg);"><span class="hide">hide</span></div>
    <div class="slide" style="background-image: url(./images/jumanji-slide.jpg);"><span class="hide">hide</span></div>
    <div class="slide" style="background-image: url(./images/onward-slide.jpg);"><span class="hide">hide</span></div>
  </div>
  <div class="botom-bar bar">
    <ul>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
      <li class="white"></li>
    </ul>
  </div>
</div>

'use strict'

$（'document'）。ready（function（）{

$('.slider').slick({
    infinite: true,
    dots: false,
    autoplay: true,
    autoplaySpeed: 2000,
    fade: true,
    cssEase: 'linear',
    speed: 2000,
    pauseOnHover: false,
    pauseOnFocus: false,
    pauseOnDotsHover: false


 })


});

.slider-box {

padding: 80px 0;

.movie-tape {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 120px;

    @include breakpoint (tablet) {
        padding: 0px 40px;
    }

    @include breakpoint (phone) {
        padding: 0;
    }
}

.slider {
    border-left: 20px solid $black;
    border-right: 20px solid $black;
}

.bar {
    height: 50px;
    background-color: $black;
    overflow: hidden;

    li {
        background-color: $white;
        height: 30px;
        width: 30px;
        display: inline-block;
        border-radius: 5px;
        margin-left: 40px;
        margin-top: 10px;            
    }

    @include breakpoint (phone) {

        height: 20px;
        flex-wrap: nowrap;

        li {
            height: 15px;
            width: 15px;
            margin-top: 2px;
            margin-left: 14px;
            border-radius: 3px;
        }
    }
}

.slide {
    background-size: cover;
    background-repeat: no-repeat;
    height: 700px;
    background-position: center;
}

button {
    display: none !important;
}

@include breakpoint (tablet) {

    .slide {
        height: 600px;
    }
}

@include breakpoint (phone) {

    .slide {
        height: 280px;
    }


  }
}

光滑的气流宽度无限

0 个答案: