如何让我的滑块减少干燥，并在所有宽度下工作？

我一直在使用滑动旋转木马（http://kenwheeler.github.io/slick/）在卡片滑块上工作。我希望它可以无限循环，并且可以在各种浏览器宽度下工作，而无需堆叠卡片，目前它还不在那儿。目前，它在循环中（5张幻灯片后）不稳定。如何让我的滑块减少干燥，并在所有宽度下工作？

如果任何人都可以帮助我，这将是伟大的，我有一个演示了CodePen！ https://codepen.io/cbg/pen/YQdqPQ

<head> 

    <style type="text/css"> 

     body { 
      margin: 0; 
     } 

     #slider { 
      background-color: #f5f7f9; 
      padding: 80px; 
      overflow: auto; 
     } 

     .service { 
      width: 260px !important; 
      height: 303px; 
      background-color: white; 
      float: left; 
      margin: 0 15px; 
      box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15); 
      border-radius: 4px; 
     } 

     .slick-arrow { 
      display: none !important; 
     } 

     .pod1 { 
      background-image: url(fakepods/pod1.png); 
     } 

     .pod2 { 
      background-image: url(fakepods/pod2.png); 
     } 

     .pod3 { 
      background-image: url(fakepods/pod3.png); 
     } 

     .pod4 { 
      background-image: url(fakepods/pod4.png); 
     } 

     .pod5 { 
      background-image: url(fakepods/pod5.png); 
     } 

    </style> 

</head> 

<body> 

    <div id="slider" class="center slider"> 
     <div class="pod1 service"></div> 
     <div class="pod2 service"></div> 
     <div class="pod3 service"></div> 
     <div class="pod4 service"></div> 
     <div class="pod5 service"></div> 
    </div> 

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> 
    <script src="slick.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript"> 
    $(document).on('ready', function() { 

    $(".center").slick({ 
    dots: false, 
    infinite: true, 
    centerMode: true, 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 250, 
    }); 


    }); 
    </script> 

</body>

来源

2017-07-11 C. Gordon

油滑要调整你的箱子，因为它计算过的可用空间和你想显示卡的数量的所有测量（如移动距离）。您通过将!important添加到您的卡片css宽度来进行补偿。

与其与Slick战斗，使用其功能来获得所需的宽度。将滑块宽度设置为宽度的N倍加上卡片边距，其中N是slidesToShow设置。使用保证金汽车中心在你的父元素：

#slider { 
    padding: 80px; 
    overflow: visible; 
    width:1160px; 
    margin:0 auto; 
}

然后通过与max-width:100%和overflow:hidden它包装在一个容器中较小的浏览器窗口的宽度调整。

#container{ 
    background-color: #f5f7f9; 
    overflow:hidden; 
    max-width:100%; 
    height:100%; 
}

这工作最的时间。 Slick通过克隆卡片创建无限循环，以便有两组，然后偶尔将它们移动到滑块的另一端，以显示无限的卡片。在只有5张卡的非常宽的屏幕上，您最终可能会看到空白区域。在我的笔中，我复制了你的卡片，所以当Slick克隆时总共有20个，然后将slidesToShow增加到9，并适当地增加了宽度#slider。

https://codepen.io/freer4/pen/EXGKXg

如果你想确保卡始终围绕，您可以调整#slider位置#container内，并设置centerMode到true

https://codepen.io/freer4/pen/WOLwLe

来源

2017-07-11 20:56:17

大答案谢谢，很高兴这是一件相对简单的事情，对我来说很重要。我仍然遇到了如何产生下一组的问题，它不是在第5动画ceable。如果你想看看，我已经更新了CodePen？再次感谢！ https://codepen.io/cbg/pen/YQdqPQ –

也许这是我如何抵消它，因为我试图排队第一个豆荚与目前正在工作的第一个边界。 –

@ C.Gordon它假定你的'＃滑块'是视口，所以它只知道这一点。看到我的笔上面的问题的解决方法 –

如何让我的滑块减少干燥，并在所有宽度下工作？

回答

相关问题