如何制作 3D 光滑滑块答案

【问题标题】：How to make a 3D slick slider如何制作 3D 光滑滑块
【发布时间】：2021-05-22 19:56:07
【问题描述】：

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

当前问题：

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

【问题讨论】：

您能向我们展示一下您当前的幻灯片在加载后的样子吗？我已经很久没有使用 slick 了，但我相信有一个地方你设置了 css 文件应该在哪里？也许它没有加载css文件？
查看此链接“codepen.io/jinzagon/pen/KKzaQwz”

标签： javascript html jquery slick.js

【解决方案1】：

给你...

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

首先，光滑的滑块不适用于较新版本的 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.1vw）定义水平偏移。第二个值（即0.8vw）定义垂直偏移。第三个值（即1vw）定义模糊半径，使阴影“平滑”（尝试删除1vw，您就会明白这一点）。

另外，我设法解决了你所有的问题：

行布局有效，
中间的卡片始终是“活动卡片”（大一点的框，大一点的字体）并且
箭头也可以（但您必须使用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>

【讨论】：

【解决方案2】：

要获得平滑的 3D 效果，您需要使用阴影，通过增加/减少阴影，您会获得弹出/弹出框的视觉错觉，对于使用 css 播放的动画效果 transition 仅使用 transform更好的性能。

你不需要外部库来实现这个，下面的例子是一个纯HTML/CSS/Javascript滑块。

编辑：在示例中添加一些解释性 cmets。

// Button click events
const buttons = document.querySelectorAll('b')
buttons.forEach((button, i) => 
  button.onclick = () => slide(i)
)

// Slide function
function slide(right) {
  // Get the SLider elements
  const container = document.querySelector('div');
  const slider = document.querySelector('ul');
  const items = document.querySelectorAll('li');
  const featured = document.querySelector('.featured');
  
  // Get the featured item
  const featuredIndex = [...items].indexOf(featured);
  
  // Set the move if not right then left
  const move = right ? 1 : -1;
  
  // Check the slider limits 
  // if right and index 0: do nothing 
  // if left and last item: do nothing
  if((!right && !featuredIndex) 
   || (right && featuredIndex === items.length -1))
    return;

  // Get the next item element
  const nextIndex = featuredIndex + move;
  const nextItem = items[nextIndex]
  
  // Remove "featured" class from last item 
  featured.classList.remove("featured");
  
  // Add "featured" class the next item
  nextItem.classList.add("featured");
  
  // Get the container size 
  const { width: containerSize } = container.getBoundingClientRect();
  
  // Get the next item size and position
  const itemSize = containerSize / 3; // Display only 3 items 
  const itemPosition = itemSize * (nextIndex + 1); // Current position
  
  // Compute the slider next position
  const position = containerSize - itemPosition - itemSize;
  
  // Move the slider on its X axis using css transform and transitionX
  slider.style.transform = `translateX(${position}px)`
}

body{
 background: #ddd;
}

/* Some csss reboot */
ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* Container */
div { 
  position: relative;
  width: 100%;
  overflow-x: hidden;
  transform: transitionX(0);
}

/* Preview/Next Buttons */
b {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.5em;
  width: 20px;
  height: 20x;
  line-height: 20px;
  font-size: 1.2em;
  color: #666;
  cursor: pointer;
  transform: translateY(-50%) scale(1);
  transition: transform .1s ease-out;
}

b:last-child {
  left: unset;
  right: 0.5em;
}

/* Button animation on hover */
b:hover{
  transform: translateY(-50%) scale(1.3);
}

/* Slider */
ul {
  position: relative;
  padding: 2em 0;
  display: flex;
  width: 100%;
  height: 150px;
  transform: translateX(0);
  transition: transform .3s ease-out;
}

/* Items */
li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  font-weight: 500;
  font-family: arial;
  color: #555;
  min-width: calc(100% / 3);
  background: #fff;
  border-radius: .5em;
  /* Animation */
  transform: translateX(10%) scale(0.5);
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
  transition: all .3s ease-out;
}

/* Featured Item */
.featured {
  z-index: 1;
  /* Animation  */
  transform: scale(1);
  box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -7px rgb(0 0 0 / 20%)
}

.featured + li {
  /* Offset the next element under the selected element */
  transform: scale(.5) translateX(-25%) !important;
}

<div>            <!-- Container -->
  <ul>           <!-- Slider -->
    <li>1</li>   <!-- Ithems -->
    <li class="featured">2</li>  
    <li>3</li>
    <li>4</li>  
    <li>5</li>  
    <li>6</li>  
    <li>7</li>  
    <li>8</li>  
    <li>9</li>  
    <li>10</li>  
  </ul>
  <b>ᐸ</b>       <!-- Preview button -->
  <b>ᐳ</b>       <!-- Next button -->
</div>

【讨论】：