光滑的旋转木马 - 想要中心滑块比其他滑块大答案

【问题标题】：Slick carousel - Want center slider bigger than others光滑的旋转木马 - 想要中心滑块比其他滑块大
【发布时间】：2020-08-08 13:30:35
【问题描述】：

Slick 插件非常适合轮播和推荐。我正在尝试使用 slick carousel 插件的中心模式属性。在他们的网站上，中心模式 (centerMode:true) 显示活动幻灯片比其他幻灯片大。但这并没有发生！这是漂亮的网站网址：http://kenwheeler.github.io/slick/

这是我的代码：

<html>
  <head>
  <meta charset="utf-8">
  <title>Youg Desai</title>
   <link rel="stylesheet" href="js/slick/slick.css">
      <link rel="stylesheet" href="js/slick/slick-theme.css">
  </head>
  <style>

  .slick-center .slide-h3{
    color: #FFF;
  }
  .slider{
    width: 600px;  
    height:150px;
    margin: 20px auto;    
    text-align: center;
  }
  .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;


  }
  </style>
  <body>
  <section id="slick-content">

  <div class="slider">
    <div><div class="slide-h3">1</div></div>
    <div><div class="slide-h3">2</div></div>
    <div><div class="slide-h3">3</div></div>
    <div><div class="slide-h3">4</div></div>
    <div><div class="slide-h3">5</div></div>
    <div><div class="slide-h3">6</div></div>

  </div>
</body>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/slick/slick.js"></script>





  <script type="text/javascript">
    $(document).ready(function(){
     $('.slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  speed:1500,
  index: 2,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
    });
  </script>

  </body>
</html>

【问题讨论】：

http://kenwheeler.github.io/slick/ 后面的链接是一张图片，我不知道它是否与您的问题相关。无论哪种方式，请Edit您的问题并使用正确的链接地址更新链接

标签： javascript jquery

【解决方案1】：

终于在 stack-overflow 上找到了答案！将其发布在此处，以便看到此问题的人不必搜索它。

.slick-center {
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    transform: scale(1.25);
}

以上将使中心滑块更大。不过，您可能需要调整填充。

【讨论】：

【解决方案2】：

我必须对.slick-list（在运行$('.your-class').slick({ ... }); 时生成）执行以下操作才能完整查看新放大的.slick-center（向Ashique Desai 提供缩放提示）：

.slick-center {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  transform: scale(1.25);    
}

.slick-list { 
  padding:45px 60px !important;
  margin-left:30px !important;
}

【讨论】：

【解决方案3】：

如果您使用 width 而不是 transform。你通常会以幻灯片结束。这是这种“技术”的主要问题。但是它比变换比例更好，至少对我来说更灵活。

要修复由于计算而未正确对齐的幻灯片，请添加以下内容：

.slick-track {
    width: fit-content !important;
}

【讨论】：