我正在尝试使用slick(centerMode)构建一个特殊的全角轮播:http://kenwheeler.github.io/slick/

我的问题是,当我想查看全尺寸上的所有滑块和所有图像而没有任何浮动时,图像向左浮动。
喜欢图片
谢谢


我已经实现了滑块:通过screen> 2000px检查,您将理解我的意思。
https://jsfiddle.net/voldemort95/69ucj3zt/9/



$('.slider').slick({
  slidesToShow: 4,
  autoplaySpeed: 550,
  rtl: false,
  slidesToScroll: 2,
  arrows: false,
  infinite: true,
  centerMode: true,
  variableWidth: true,
  infinite: true,
  focusOnSelect: true,
  touchMove: true,
});
function slickPause() {
	   $('.slider').slick('slickPause');
}
slickPause();
$('.slider').mouseover(function() {
	   $('.slider').slick('slickPlay')
});
$('.slider').mouseout(function() {
	   slickPause();
});

* {
  box-sizing: border-box;
}



body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

[class="slick-active"] {
       background: black;
}

.wrap {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  padding: 0 60px;
   background-color: #230e2c;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

.slick-activeafter{
  background: red
}
.item.slick-slide.slick-center + .slick-slide {
transform:"";
    /* z-index: 10; */
}
.wrap:after {
  content:'';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}

.slider {
  position: relative;
  z-index: 200;
  padding: 0 0px;
  margin: 5rem auto;
  max-width: 100%;
  width: 100%;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 50px;
  line-height: 50px;
  margin-top: -25px;
  border: none;
  background: transparent;
  color: #fff;
  font-family: monospace;
  font-size: 5rem;
  z-index: 300;
  outline: none;
}

.slick-prev {
  left: -50px;
  text-align: left;
}

.slick-next {
  right: -50px;
  text-align: right;
}

.item.slick-slide {
  width: 400px;
  height: 400px !important;
  transition: transform .4s;
  position: relative;
}

.slick-slide:after {
  content:'';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px #979797;
  background-color: rgba(255, 255, 255, 0.11);
  transition: transform .4s;
}

.item.slick-slide {
  transform: scale(0.7)  translate(640px);
}

.slick-slide.slick-current {
    opacity: 1;
}
.item.slick-slide.slick-center + .slick-slide {
  transform: scale(0.8) translate(-250px);
  z-index: 10;
}

.item.slick-slide.slick-center + .slick-slide + .item.slick-slide {
  transform: scale(0.7)  translate(-640px);
  z-index: 5;
}

.item.slick-slide.slick-active {
  transform: scale(0.8) translate(250px);
}

.item.slick-slide.slick-center {
  /* margin: 0 -10%; */
  transform: scale(1);
  z-index: 30;
}
.slick-center{
  border: solid 1px #979797;
  background-image: linear-gradient(to bottom, #ffffff, #d9d9d9);
}

.slick-center .description{
  display: inline-block;
  color : #5b1f74;
}

.slick-center .title{
  color : #5b1f74;
  font-size: 40px;

}

.slick-center .img{
  display: inline-block;
}
.slick-slide img {
     display: none;
}
p.title{
  position: absolute;
  text-align: center;
  color: #fff;
  left: 37%;
  font-size: 20px;
  top: 50%;
}
p.description{
  position: absolute;
  text-align: center;
  color: #fff;
  bottom: 0;
  font-size: 20px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<div class="wrap">
  <div class="slider">

    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
    <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
      <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
     <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
    <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
    <div class="item">
     <img src=".." class="img" style=" width: 97px;height: 155px;    position: absolute;
    left: 36%;" alt="">
      <p class="title">TEST</p>
      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>

    </div>
  </div>
</div>

最佳答案

更新以上我的评论,此操作将向前和向后滑动1张幻灯片:https://jsfiddle.net/08vLok1w/

可以对其进行重构以最大程度地减少一些jQuery调用,并且如果您一次跳转多张幻灯片,它将被破坏,但这也可以内置到其中(需要在范围之外跟踪nextSlidecurrentSlide beforeChange方法)。

您的HTML应该保持不变,但是在下面您将找到更新的JS:

$('.slider').on('init', function(event, slick){
    jQuery(".slider .slick-slide.slick-active.slick-center").next().next().next().css("transform", "scale(0.7)  translate(-640px)");
    jQuery(".slider .slick-slide.slick-active.slick-center").next().next().next().next().css("transform", "scale(0.7)  translate(-640px)");
});

$('.slider').slick({
    slidesToShow: 3,
    autoplaySpeed: 5000,
    rtl: false,
    slidesToScroll: 2,
    arrows: true,
    infinite: true,
    centerMode: true,
    variableWidth: true,
    focusOnSelect: true,
    touchMove: true,
    draggable: false
});
function slickPause() {
    $('.slider').slick('slickPause');
}
slickPause();
$('.slider').mouseover(function() {
    $('.slider').slick('slickPlay')
});
$('.slider').mouseout(function() {
    slickPause();
});

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    if(nextSlide == currentSlide) { return false; }
    if(nextSlide - currentSlide == 1 || nextSlide - currentSlide < -1) {
        var slide1 = jQuery(`.slick-slide[data-slick-index=${nextSlide + 3}]`);
        var slide2 = jQuery(`.slick-slide[data-slick-index=${nextSlide + 4}]`);

        jQuery(".slider .slick-slide").css("transform", "");
        jQuery(".slider .slick-slide.slick-active.slick-center").prev().css("transform", "scale(0.7)  translate(640px)")
        jQuery(".slider .slick-slide.slick-active.slick-center").css("transform", "scale(0.8) translate(250px)");
        jQuery(".slider .slick-slide.slick-active").not(".slick-center").eq(1).css("transform", "scale(1)");
        jQuery(".slider .slick-slide.slick-active").not(".slick-center").eq(1).next().css("transform", "scale(0.8) translate(-250px)");
        jQuery(slide1).css("transform", "scale(0.7)  translate(-640px)");
        jQuery(slide2).css("transform", "scale(0.7)  translate(-640px)");
        console.log("next")
    } else {
        var slide1 = jQuery(`.slick-slide[data-slick-index=${currentSlide + 2}]`);
        var slide2 = jQuery(`.slick-slide[data-slick-index=${currentSlide + 3}]`);

        jQuery(".slider .slick-slide").css("transform", "");
        jQuery(".slider .slick-slide.slick-active.slick-center").next().css("transform", "scale(0.7)  translate(-640px)")
        jQuery(".slider .slick-slide.slick-active.slick-center").css("transform", "scale(0.8) translate(-250px)");
        jQuery(".slider .slick-slide.slick-active").not(".slick-center").eq(0).css("transform", "scale(1)");
        jQuery(".slider .slick-slide.slick-active").not(".slick-center").eq(0).prev().css("transform", "scale(0.8) translate(250px)");
        jQuery(slide1).css("transform", "scale(0.7)  translate(-640px)");
        jQuery(slide2).css("transform", "scale(0.7)  translate(-640px)");
        console.log("prev")
    }
});


并添加了CSS:

.slick-arrow {
    position: absolute;
    top: 0;
    width: calc(50% - 200px);
    height: 100%;
    line-height: 50px;
    border: none;
    background: blue;
    color: #fff;
    font-family: monospace;
    font-size: 5rem;
    z-index: 300;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

10-05 20:39
查看更多