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

Slick Slider Center Mode doesnt work

我使用 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>

抱歉,我是编码新手,也是这个社区的新手。请来点 耐心和放纵。

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

首先,您的 jquery 设置有误。它应该以 $(document).ready(function(){ 而不是 $(document).on('ready', function() { 开头。在您的 CSS 中,您似乎为幻灯片设置了 width 而不是图像本身,对吗?在这种情况下,请尝试将图像设置为与幻灯片相同的固定 width