Slick Carousel：隐藏内容不适用于最后一项和第一项

Question

了解有一些类似的主题，例如：

我试过了，它仍然无法处理我的代码。我的每个项目都可以显示在中间，其余项目被隐藏。除了最后一项和第一项。请点击下面的“第 8 项”和“第 1 项”以了解我的意思。

在这方面我真的很需要帮助，希望你们中的一些人能给我一些建议。请！

$('.slick-wrap').slick({
      dots: false,
      focusOnSelect: true,
      infinite: true,
      arrows: false,
      speed: 300,
      slidesToShow: 5,
      slidesToScroll: 1,
      centerMode: true,
      centerPadding: '30px',
      responsive: {
          600: {
              items: 2
          }
      }
 });


    $('.slick-wrap').on('init', function(event, slick){
        var carouselTexts = $(".slick-item .cont-hide");
        var idx = $(event.target).find('.slick-list .slick-center').index();
        carouselTexts.eq(idx).css('visibility', 'visible');
    });

    //display and hide the content
    $('.slick-item').on('click', function() {
        var carouselTexts = $(".slick-item .cont-hide");
        var clickedNum = $(".slick-item").index(this);

        carouselTexts.not(clickedNum).css('visibility', 'hidden')
        carouselTexts.eq(clickedNum).css('visibility', 'visible');
    });

.slick-section{
    padding: 25px;
    text-align: center;
}
.slick-container{
    width: 100%;
    margin: 0 auto;
}
.slick-wrap{
    margin: 0 -10px;
}
.slick-item{
    padding: 0 10px;
}

.slick-dots {
    list-style-type: none;
    margin: 25px 0 0;
    padding: 0;
}
 .slick-dots li {
    width: auto;
    height: auto;
    display: inline-block;
    padding: 0 5px;
 }

 .slick-active button{
     background: #ccc;
 }
 
.cont-hide{ visibility: hidden; }

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

<section class="slick-section">
  <div class="slick-container">
    <div class="slick-wrap">
        <div class="slick-item">1 <div class="main-panel cont-hide">test 1</div></div>
        <div class="slick-item">2 <div class="main-panel cont-hide">test 2</div></div>
        <div class="slick-item">3 <div class="main-panel cont-hide">test 3</div></div>
        <div class="slick-item">4 <div class="main-panel cont-hide">test 4</div></div>
        <div class="slick-item">5 <div class="main-panel cont-hide">test 5</div></div>
        <div class="slick-item">6 <div class="main-panel cont-hide">test 6</div></div>
        <div class="slick-item">7 <div class="main-panel cont-hide">test 7</div></div>
        <div class="slick-item">8 <div class="main-panel cont-hide">test 8</div></div>
     </div>
  </div>
</section>

Answer 1

$('.slick-item').on('click', function() {
        var carouselTexts = $(".slick-item .main-panel");
        var clickedNum = $(".slick-item").index(this);

    $('.slick-item .main-panel').each(function(i, obj) {
        jQuery(this).css('display', 'none');
    });

    jQuery(this).children('.main-panel').attr('style','display: block');
});

$('.slick-wrap').on('afterChange', function (event, slick, currentSlide) {
    var elt = slick.$slides.get(currentSlide);
    //console.log(elt);
    
    var elements = $(elt);
    var found = $('.main-panel', elements);
    found.attr('style','display: block');
    found.removeClass("cont-hide");
    
    var currentIndex = $(elt).data('slick-index');
});

Slick Carousel：隐藏内容不适用于最后一项和第一项

Slick Carousel: Hidden Content is not working on last and first item

javascript

html

jquery

css

slick.js