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

Question

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

Slider Template

我的网站托管在：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，对吗？在这种情况下，请尝试将图像设置为与幻灯片相同的固定width。