时间戳

首页 > 解决方案 > 如何制作 3D 光滑滑块

javascript - 如何制作 3D 光滑滑块

问题描述

使用slick，我试图实现一个看起来像这样的滑块：

在此处输入图像描述

在上面，中心幻灯片是slick启动时默认选择的。然后，当单击箭头时，slick-current该类将转移到一个新的 div 上，并且可以使用 css translate 来缩放图像。

这是我当前的代码：

$(function(){

  $("#downloadNow__slick").slick({
    slidesToShow: 3,
    // initialSlide: 2,
    centerMode: true,
    centerPadding: "53px",
    arrows: true,
    dots: false,
    infinite: true,
    cssEase: 'linear',
  });

});
.downloadNow {
  background: grey;
  padding: 60px 0px;

  &__wrapper {
    position: relative;
  }
  
  .downloadNowCard{
    background: white;
    padding: 100px;
  }


  .slider {
    max-width: 1110px;
    margin: 0 auto;
  }

  .slick-track {
    padding-top: 53px;
    padding-bottom: 53px;
  }

  .slick-slide {
    text-align: center;
    transition: transform 0.3s ease-in-out;
  }


  .slick-slide.slick-current {
    transform: scale(1.35);
    position: relative;
    z-index: 1;
  }

  .slick-slide img {
    width: 100%;
  }


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>


<section class="downloadNow">
  <div class="downloadNow__wrapper">


    <div class="downloadNow__slides" id="downloadNow__slick">
      <div class="downloadNowCard">Card 1</div>
      <div class="downloadNowCard">Card 2</div>
      <div class="downloadNowCard">Card 3</div>
    </div>
   

  </div>
</section>

目前的问题：

  1. 无法实现行布局（flex在包装器上不能很好地播放）
  2. 如果我取消注释initialSlide: 2，滑块会中断。我正在尝试将中心幻灯片作为活动幻灯片。
  3. 光滑不改变幻灯片

标签： javascripthtmljqueryslick.js

解决方案

干得好...


由于光滑滑块的一些奇怪行为，我花了一些时间才弄清楚。

首先，光滑的滑块不适用于较新版本的 jQuery。经过大量试验和错误（并在 SO 上搜索旧答案）后，我发现它仅适用于旧版本的 jQuery，原因很奇怪。这也是它对您不起作用的主要原因。我使用的 jQuery 比您使用的旧版本，但它仍然无法正常工作。它适用于v1.12.3（它也可能适用于一些较新版本的 jQuery，但我没有测试哪个是最新的兼容版本）。

要实现 3D 效果，您可以使用box-shadow: 0.1vw 0.8vw 1vw rgba(0, 0, 0, 0.35);. 使用当前值（即0.1vw 0.8vw 1vw），您会在底部和右侧得到一点点模糊阴影。第一个值（即）定义水平偏移。第二个值（即）定义垂直偏移。第三个值（即）定义模糊半径，使阴影“平滑”（尝试删除，您会明白这一点）。0.1vw0.8vw1vw1vw

此外，我设法解决了您的所有问题：

  • 行布局有效，
  • 中间的卡片总是一张“活动卡片”（大一点的盒子，大一点的字体）和
  • 箭头也可以（但您必须使用z-index: 100;将它们推到前面）。

$(document).on('ready', function() {

  $('.slider').slick({
    dots: true,
    centerMode: true,
    infinite: true,
    centerPadding: '60px',
    slidesToShow: 3,
    speed: 400
  });

});
html {
  height: 100%;
  overflow-x: hidden;
}

body {
  background: #F8F8F8;
  height: 100%;
  margin: 0;
}

.slider {
  width: 90%;
  left: 5%;
}

h3 {
  background: #fff;
  color: #202020;
  font-size: 3.5vw;
  line-height: 23vh;
  margin: 6.5vw;
  margin: 6.5vw;
  padding: 1vw;
  position: relative;
  text-align: center;
  box-shadow: 0.1vw 0.8vw 1vw rgba(0, 0, 0, 0.35);
}

.slick-center {
  transition: 0.2s ease-in-out;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  transform: scale(1.3);
}

.slick-center h3 {
  font-size: 4vw;
}

.slick-prev,
.slick-next {
  z-index: 100 !important;
}

.slick-prev:before {
  transition: 0.2s ease-in-out;
  color: #303030 !important;
  font-size: 2vw !important;
  margin-right: -10vw;
}

.slick-next:before {
  transition: 0.2s ease-in-out;
  color: #303030 !important;
  font-size: 2vw !important;
  margin-left: -10vw;
}

.slick-dots li button:before {
  transition: 0.2s ease-in-out;
  font-size: 0.7vw !important;
}
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css' rel='stylesheet' />
  <link href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css' rel='stylesheet' />
</head>

<body>

  <div class='slider'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
  </div>

</body>

</html>

推荐阅读