Question

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

现在，我能做的最好的就是利用名为Slick的库来完成类似的事情：

$single = isset($_REQUEST['single']) ? 'Single' : '';
$married = isset($_REQUEST['married']) ? 'Married' : '';

SELECT *
FROM $users_table
WHERE (civil_status = '$single' OR civil_status = '$married')

<input type="checkbox" name = "single">
<label class="label-for-checkbox" >Single</label>
<input type="checkbox" name = "married">
<label class="label-for-checkbox" >Married</label>

$('.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;
}

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

请分享一些有关如何实现它的建议。我不仅限于此Slick库，还可以打开其他任何选项，例如纯CSS或JQuery。

Answer 1

您实际上相距不远，只是与样式定位有些矛盾。我在跨度上取了一些样式，并在幻灯片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);
}

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

1 个答案: