如何将光滑的滑块全宽居中？答案

【问题标题】：How to center a slick slider full width?如何将光滑的滑块全宽居中？
【发布时间】：2020-04-28 16:03:53
【问题描述】：

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

我的问题是，当我想查看所有滑块和全角上的所有图像而没有任何浮动时，图像向左浮动。和图片一样谢谢

我已经实现了滑块：通过屏幕检查>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>

【问题讨论】：

这是一个很棒的 Slick 用法；我是粉丝。但是我不认为你可以使用 CSS 来做到这一点（因为你不能专门选择下一个兄弟姐妹或最后一个兄弟姐妹）。您需要使用像 setPosition 这样的 Slick 事件编写一些 JS，它会在最后一张和下一张幻灯片上重置 transform正确的轨道？
我已经尝试过使用JavaScript，我会尝试更多，谢谢
我过去做过类似的事情，所以今天下午有机会我会发布一些示例代码；祝你好运！
谢谢，我正在尝试你所说的这个 slick 函数 on('FUNCTION', function(event, slick, currentSlide,..){
我试过用 JS 来做，但没有机会：/你有什么想法吗？

标签： jquery css slick.js

【解决方案1】：

更新我上面的评论，这将向前和向后移动 1 张幻灯片：https://jsfiddle.net/08vLok1w/

它可以被重构以最小化一些 jQuery 调用，如果你一次跳多张幻灯片，它会中断，但这也可以内置在其中（需要跟踪 nextSlide 和 currentSlide在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;
}

【讨论】：

干得好，我真的很感激你所做的我已经尝试过你的代码，我现在面临的问题，在我做出改变之前的滑块会有这个问题，我试过使用## # on('init', function())## 如果我解决了，我会更新我的答案。你有什么主意吗？再次感谢您
我很困惑，你的意思是右边的幻灯片在你初始化时没有到位？如果是这样的话，我可以在其中添加一些内容来解决这个问题。 PS：我可能会继续修改这个，因为我以后可能想使用它（假设没关系），如果我创造更好的东西，我一定会更新这张票
恰好右边的幻灯片在初始化时没有到位。我也尝试过使用 init 函数，但没有工作，再次感谢您。
我想减少 jQuery 调用的数量以提高效率，但我添加了 onInit 函数来放置下一张幻灯片。这应该让你开始，所以让我知道你的想法。
我看到它好多了（完美），实际上效果很好，感谢您的工作和努力，我真的很感激：D