Question

我使用Slick Slider中的中心模式。现在我有一个问题，我想要全宽滑块，并且居中的图像比幻灯片大得多。我在模板中添加了一张图片：

我的网站托管于：http://be-virtual.org/schnittchen/

我的代码如下使用Javascript：

     $(document).on('ready', function() {

      
$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
  

    });

.slick-center .slide-h3{
    color: #FFF;
  }
  .slider{
    width: 600px;  
    height:150px;
    margin: 20px auto;    
    text-align: center;
  }

.slider button {
  background: #000;
}

.slider button:hover button:active button:visited {
  background: #000;
}

  .slide-h3{
    margin: 10% 0 10% 0;
    padding: 40% 20%;
    background: #008ed6;
  }
  .slider div{
    margin-right: 5px;
  }
  .slick-slide{
    opacity: .6;
  }
  .slick-center{
    display: block;
    max-width: 10% !important;
    max-height:20% !important;
    opacity: 1;


  }

 <section class="center slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=7">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=8">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=9">
    </div>

对不起，我刚接触了这个社区的新编码。请有一些耐心和放纵。

Answer 1

升级你的slick min js文件使用最新版本 http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js

Answer 2

对于初学者来说，你的jquery设置是错误的。它应以$(document).ready(function(){而不是$(document).on('ready', function() {开头。在你的CSS中看起来你已经为幻灯片设置了width但是没有设置图像本身，这是正确的吗？在这种情况下，请尝试将图像设置为与幻灯片显示相同的固定width。

光滑的滑块中心模式不起作用

2 个答案: