jquery 如何删除光滑旋转木马中最后一个项目上的填充/空间

jdgnovmf 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(85)

首先，我没有使用centerMode: true，而是使用了slick-listpadding-right of 20%。我的问题是如何删除slick carousel中最后一个项目的padding-right。我正在考虑在slick中检查项目的length，然后将其设置为slickSetOption，但我不知道如何做到这一点。
顺便说一句，你可以改变代码，重要的是我想摆脱的空间上的最后一个项目的光滑，但光滑infinite: false和centerMode: false将留下来。
下面是我的代码，为了更好地理解，这里是框代码https://codepen.io/。

function slickRemoveLastSpaceItem() {
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        dots: true,
        infinite: false
    });
}

slickRemoveLastSpaceItem();

body{
  background:#ccc;
}
.container {
  font-family:Arial;
  max-width:800px;
  display:block;
  margin:0 auto;
  position: relative;
  background: red;
  border: 3px solid red;
}
.slider-content {
  background: #fff;
  font-size: 3rem;
  text-align: center;
  height: 200px !important;
  border: 1px solid blue;
}

.slick-list {
  padding: 0 20% 0 0 !important;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="container">
  <div class="slider slider-for">
    <div class="slider-content">1</div>
    <div class="slider-content">2</div>
    <div class="slider-content">3</div>
  </div>
</div>

jquery

来源：https://stackoverflow.com/questions/76793527/how-to-remove-the-padding-space-on-the-last-item-in-slick-carousel

1条答案

按热度按时间

cbwuti441#

您可以slick.slideCount和改变填充时，最后一项将成为可见的。在这种情况下，我使用了一个类。

function slickRemoveLastSpaceItem() {
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        dots: true,
        infinite: false
    });
}

slickRemoveLastSpaceItem();

$('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  if(nextSlide == slick.slideCount-1) {
    $('.slick-list').addClass('lastItem');
  } else {
    $('.slick-list').removeClass('lastItem');
  }
});

body{
  background:#ccc;
}
.container {
  font-family:Arial;
  max-width:800px;
  display:block;
  margin:0 auto;
  position: relative;
  background: red;
  border: 3px solid red;
}
.slider-content {
  background: #fff;
  font-size: 3rem;
  text-align: center;
  height: 200px !important;
  border: 1px solid blue;
}

.slick-list {
  padding: 0 20% 0 0!important;
}

.slick-list.lastItem {
  padding: 0 0 0 20%!important;
}

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="container">
  <div class="slider slider-for">
    <div class="slider-content">1</div>
    <div class="slider-content">2</div>
    <div class="slider-content">3</div>
  </div>
</div>

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 如何删除光滑旋转木马中最后一个项目上的填充/空间

1条答案

相关问题

热门标签

最新问答