Question

光滑的插件非常适合旋转木马和见证。我正在尝试使用光滑轮播插件的中心模式属性。在他们的网站上，中心模式（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>

Answer 1

终于找到了堆叠溢出本身的答案！在此处发布，以便人们看到这个问题不必搜索它。

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

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

Answer 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;
}

Answer 3

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

要根据计算修复幻灯片未正确对齐，请添加以下内容：

tibble::enframe(colSums(tmp[-1] != ""))

# # A tibble: 4 x 2
#   name      value
#   <chr>     <dbl>
# 1 Q3_Red        4
# 2 Q3_Blue       3
# 3 Q3_Green      3
# 4 Q3_Purple     5

光滑的旋转木马 - 希望中心滑块比其他更大

3 个答案: