css - 光滑的 slider 导航在某些断点处显示的元素少于预期

Question

我已经构建了一个带有自定义导航的漂亮 slider 。

(function ($) {
   
    $('.slider-for').slick({
      slidesToShow: 1,
      arrows: false,
      fade: true,
      autoplay: true,
      autoplaySpeed: 2000,
      asNavFor: '.slider-nav',
      dots: false,
      customPaging: function(slick,index) {
        return '<a>'+'</a>';
     },

      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            dots: true,
          }
        }
        
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
      ]

    });
    $('.slider-nav').slick({
      infinite: true,
      slidesToShow: 5,
      asNavFor: '.slider-for',
      focusOnSelect: true,
      dots: false,
      customPaging: function(slick,index) {
        return '<a>' + (index + 1) + '</a>';
     },

      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: false,
            arrows: false,
            dots: false,
          }
        }
        
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
      ]

      

    });

    
  
  })(jQuery);

@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
body {
  font-family: 'Playfair Display', serif;
}

#main-slider-wrap {
  margin-top: 100px;
  background-color: #fff;
  margin-bottom: 150px;
}
#main-slider-wrap .container {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  #main-slider-wrap .container {
    margin-top: 40px;
  }
}
#main-slider-wrap .slick-slide {
  opacity: 0.2;
}
#main-slider-wrap .slick-slide.slick-current {
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #main-slider-wrap .slide-item {
    opacity: 1;
  }
}
#main-slider-wrap .slide-item.slick-center {
  opacity: 1;
}
#main-slider-wrap .slide-item img {
  width: auto;
  height: 44px;
  cursor: pointer;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #main-slider-wrap .slide-item img {
    height: 54px;
  }
}
#main-slider-wrap .slick-dots {
  position: relative;
  list-style: none;
  text-align: center;
  padding-left: 0;
}
@media screen and (max-width: 1080px) {
  #main-slider-wrap .slick-dots {
    margin-top: 100px;
  }
}
#main-slider-wrap .slick-dots li {
  width: auto;
  margin: 0;
  margin-right: 18px;
  height: 12px;
  display: inline-block;
}
#main-slider-wrap .slick-dots li:last-child {
  margin-right: 0;
}
#main-slider-wrap .slick-dots li.slick-active a {
  background-color: #7AE1BF;
}
@media screen and (max-width: 480px) {
  #main-slider-wrap .slick-dots li.slick-active {
    border-bottom: none;
  }
}
#main-slider-wrap .slick-dots li a {
  font-size: 12px;
  cursor: pointer;
  color: #001D3A;
  text-transform: uppercase;
  width: 12px;
  display: block;
  background-color: #EEEEEE;
  height: 12px;
  border-radius: 50%;
}
#main-slider-wrap .slick-dots li a:hover {
  text-decoration: none;
}
#main-slider-wrap .slider-for .text-center a {
  border-bottom: 1px solid;
}
#main-slider-wrap .slider-for h3 {
  font-weight: 400;
  font-size: 24px;
  color: #000000;
  letter-spacing: -0.15px;
  text-align: center;
  line-height: 32px;
  margin-bottom: 40px;
  height: 81px;
  min-height: 81px;
}
@media screen and (max-width: 768px) {
  #main-slider-wrap .slider-for h3 {
    margin-bottom: 20px;
    height: auto;
    min-height: auto;
  }
}
#main-slider-wrap .slider-for a {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #FF8672;
  text-align: center;
  line-height: 28px;
  padding-bottom: 3px;
  font-size: 16px;
}
#main-slider-wrap .slider-for a:hover {
  text-decoration: none;
}
#main-slider-wrap .slider-nav .slick-current h3 {
  border-bottom: 3px solid #00DDBD;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://13779usreg20181102.com/us/sites/all/themes/krm/slick/slick.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-10 offset-md-1">
         <div id="main-slider-wrap">
           <div class="center">
            <div class="slider-nav text-center">
              <div class="slide-item">
                <img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DailyMail_logo_desktop.png?6710">

              </div>
              <div class="slide-item">
                <img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/JCK_logo_desktop.png?6710">
              </div>
              <div class="slide-item">
                <img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/NationalJeweler_logo_desktop.png?6710">

              </div>
              <div class="slide-item">
                <img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DigitalCommerce_logo_desktop.png?6710">
              </div>
              <div class="slide-item">
                <img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DPA_logo_desktop.png?6710">
              </div>
            </div>
          </div>
           <div class="container">
            <div class="row">
              <div class="col-sm-12 col-md-8 offset-md-2">
                <div class="slider-for">
                  <div class="text-center">
                    <h3>They're real and they're spectacular!</h3>
                    <a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>
                  </div>
                  <div class="text-center">
                    <h3>A New Diamond Brand Helmed by Former Apple & Sleep Number Bed Execs</h3>
                    <a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>

                  </div>
                  <div class="text-center">
                    <h3>Forget the 4 C’s. Meet the 3 S’s.</h3>
                    <a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>

                  </div>
                  <div class="text-center">
                    <h3>Diamond startup targets millennials with sparkly diamonds.</h3>
                    <a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>

                  </div>
                  <div class="text-center">
                    <h3>Sparkle Cut CEO interview.</h3>
                    <a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank">Read article</a>

                  </div>
                </div>
              </div>
            </div>
          </div>
          
          
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

在 1024，我有它所以它只显示一个。

出于某种原因，在某些断点处，顶部 slider (slider-nav) 显示的元素少于 5 个？不确定为什么会这样？任何 CSS 问题？提前致谢!

这一个只显示 4 个元素

这只显示了 2

Answer 1

不确定您是否按照预期的方式使用光滑的 slider 。

我之前的选择没有用，所以我回滚到这个答案。

幻灯片并没有丢失，它们被 slick-track 容器上带有 css 转换内联样式的 slick slider 脚本隐藏了。

也许有一个功能可以禁用宽屏幕的滑动效果，因为它会让你的幻灯片隐藏起来。

否则，你应该可以用 css 覆盖它:

.slick-slider .slick-track, .slick-slider .slick-list {
     -webkit-transform: translate3d(0, 0, 0) !important;
      -moz-transform: translate3d(0, 0, 0) !important;
      -ms-transform: translate3d(0, 0, 0) !important;
      -o-transform: translate3d(0, 0, 0) !important;
      transform: translate3d(0, 0, 0) !important;
}

此代码已在 primary.css 表中，但我添加了 !important，因为它无法控制元素样式。

此代码应放置在针对目标屏幕尺寸的媒体查询中，因为 translate3d 用于在移动 View 中滑动元素(1 x 1 元素)。