具有放大缩放效果的无限旋转木马

Question

我正在尝试实现一个支持自动播放无限循环的响应式轮播，并且中心项目始终占据视口的 70%。

现在我能做的最好的事情就是利用一个名为Slick的库：

https://codepen.io/anon/pen/pBvQBM

$('.slick')
  .on('init', () => {
    $('.slick-slide[data-slick-index="-2"]').addClass('lt2');
    $('.slick-slide[data-slick-index="-1"]').addClass('lt1');
    $('.slick-slide[data-slick-index="1"]').addClass('gt1');
    $('.slick-slide[data-slick-index="2"]').addClass('gt2');
})
  .slick({
  centerMode: true,
  centerPadding: 0,
  slidesToShow: 3,
  autoplay: true,
  autoplaySpeed: 500,
}).on('beforeChange', (event, slick, current, next) => {
  $('.slick-slide.gt2').removeClass('gt2');
  $('.slick-slide.gt1').removeClass('gt1');
  $('.slick-slide.lt1').removeClass('lt1');
  $('.slick-slide.lt2').removeClass('lt2');

  const lt2 = (current < next && current > 0) ? current - 1 : next - 2;
  const lt1 = (current < next && current > 0) ? current : next - 1;
  const gt1 = (current < next || next === 0) ? next + 1 : current;
  const gt2 = (current < next || next === 0) ? next + 2 : current + 1;

  $(`.slick-slide[data-slick-index="${lt2}"]`).addClass('lt2');
  $(`.slick-slide[data-slick-index="${lt1}"]`).addClass('lt1');
  $(`.slick-slide[data-slick-index="${gt1}"]`).addClass('gt1');
  $(`.slick-slide[data-slick-index="${gt2}"]`).addClass('gt2');

  // Clone processing when moving from 5 to 0
  if (current === 5 && next === 0) {
    $(`.slick-slide[data-slick-index="${current - 1}"]`).addClass('lt2');
    $(`.slick-slide[data-slick-index="${current}"]`).addClass('lt1');
    $(`.slick-slide[data-slick-index="${current + 2}"]`).addClass('gt1');
    $(`.slick-slide[data-slick-index="${current + 3}"]`).addClass('gt2');
  }

  // Clone processing when moving from 0 to 5
  if (current === 0 && next === 5) {
    $(`.slick-slide[data-slick-index="${current - 1}"]`).addClass('gt2');
    $(`.slick-slide[data-slick-index="${current}"]`).addClass('gt1');
    $(`.slick-slide[data-slick-index="${current - 2}"]`).addClass('lt1');
    $(`.slick-slide[data-slick-index="${current - 3}"]`).addClass('lt2');
  }

  console.log('beforeChange', current, ':', lt2, lt1, next, gt1, gt2);
});

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 20vh 0;
}

.slick span {
  display: block;
  background: #3498db;
  color: #fff;
  font-size: 36px;
  height: 100px;
  line-height: 100px;
  position: relative;
  text-align: center;
  //border: solid 1px rgb(145, 195, 0);
  
  transform: translate(0, 0) scale(.4);
  transition: all .4s ease;
  opacity: .5;
}

.slick-slide {
  border: solid 1px #2dc37f;
}

.slick-slide.lt2 span {
  transform: translate(10%, 0) scale(.6);
}
.slick-slide.lt1 span {
  opacity: .7;
  transform: translate(5%, 0) scale(.8);
}
.slick-slide.gt1 span {
  opacity: .7;
  transform: translate(-5%, 0) scale(.8);
}
.slick-slide.gt2 span {
  transform: translate(-10%, 0) scale(.6);
}
.slick-slide.slick-center span {
  z-index: 1;
  transform: scale(1);
  opacity: 1;
  color: #e67e22;
}

.slick-prev,
.slick-next{
  position: absolute;
  top: 50%;
  appearance: none;
  margin-top: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: transparent;
  outline: none;
  z-index: 100;
}

.slick-prev {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #007bff transparent transparent;
  left: 0;
}
.slick-next {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent #007bff;
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="slick">
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
</div>

然而，这并不是我想要的。在这个演示中，所有三个项目具有相同的宽度，但我希望中心项目具有 70% 的宽度，如下所示：

请分享一些关于如何实现它的指示。我不仅限于这个 Slick 库，还可以使用任何其他选项，例如纯 CSS 或 JQuery。

Answer 1

您实际上并不太远，只是与您的样式定位有点不一致。我在 span 上去掉了一堆样式，在幻灯片 div 上添加了一些样式：

https://codepen.io/anon/pen/PgwXbV

你可能会调整一些细节，但我认为这个 CSS 非常接近你想要的效果：

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 20vh 0;
}

.slick span {
  display: block;
  background: #3498db;
  color: #fff;
  font-size: 36px;
  height: 100px;
  line-height: 100px;
  position: relative;
  text-align: center;
  /* border: solid 1px rgb(145, 195, 0); */
  /* make the non-centered slides partially transparent */
  opacity: .5;
}

.slick-slide {
  border: solid 1px #2dc37f;
  /* make the non-centered slides smaller */
  transform: scale(.5);
  transition:transform .4s ease;
}

.slick-slide.slick-center {
  /* make the center slide full size */
  transform: scale(1);}

.slick-slide.slick-center span {
  z-index: 1;
  transform: scale(1);
  /* make the centered slides solid */
  opacity: 1;
  color: #e67e22;
}

.slick-prev,
.slick-next{
  position: absolute;
  top: 50%;
  appearance: none;
  margin-top: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: transparent;
  outline: none;
  z-index: 100;
}

.slick-prev {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #007bff transparent transparent;
  left: 0;
}
.slick-next {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent #007bff;
  right: 0;
}

这部分似乎没有必要进行更改，尽管我明白你的目的：

.slick-slide.lt2 span {
  transform: translate(10%, 0) scale(.6);
}
.slick-slide.lt1 span {
  opacity: .7;
  transform: translate(5%, 0) scale(.8);
}
.slick-slide.gt1 span {
  opacity: .7;
  transform: translate(-5%, 0) scale(.8);
}
.slick-slide.gt2 span {
  transform: translate(-10%, 0) scale(.6);
}