Slick Carousel：隐藏非中心（活动）内容

Question

我想隐藏除中间那个以外的所有内容。

以上图为例，仅显示“内容1”，其余隐藏。但是图片还在显示。

当点击第二张图片时，将显示“内容 2”并隐藏“内容 1”。

我尝试使用 jquery 查找“slick-center” class 并删除隐藏的内容，但它不起作用。希望你们中的一些人能给我一些建议。谢谢！

$('.slick-wrap').on('init', function(event, slick){
  var dots = $( '.slick-dots li' );
  dots.each( function( k, v){
      $(this).find( 'button' ).addClass( 'heading'+ k );
  });
  var items = slick.$slides;
  items.each( function( k, v){
      var text = $(this).find( 'h2' ).text();
      $( '.heading' + k ).text(text);
  });
 });
 
 $('.slick-wrap').slick({
      dots: true,
      focusOnSelect: true,
      infinite: true,
      arrows: false,
      speed: 300,
      slidesToShow: 5,
      slidesToScroll: 1,
      centerMode: true,
      centerPadding: '30px',
      responsive: {
          600: {
              items: 2
          }
      }
 });
 
 if ($('.slick-item').hasClass("slick-center")){
        $('div').removeClass( "cont-hide" );
 }

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

h2{
  display:none;
}

.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;
 }
button{
    width: auto;
    height: auto;
    padding: 10px;
    font-size: 12px;
    color: #666;
    border: none;
    background: #f0f0f0;
 }

 .slick-active button{
     background: #ccc;
 }
 
 .cont-hide{
    display:none;
 }

<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">
        <h2>Image 1</h2>
        <img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
        <div class="cont-hide">Content 1</div>
      </div>

      <div class="slick-item">
        <h2>Image 2</h2>
        <img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
        <div class="cont-hide">Content 2</div>
      </div>

      <div class="slick-item">
        <h2>Image 3</h2>
        <img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
        <div class="cont-hide">Content 3</div>
      </div>

      <div class="slick-item">
        <h2>Image 4</h2>
        <img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
        <div class="cont-hide">Content 4</div>
      </div>
      <div class="slick-item">
        <h2 class="cont-hide">Image 5</h2>
        <img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
        <div class="cont-hide">Content 5</div>
      </div>
      <div class="slick-item">
        <h2>Image 6</h2>
        <img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
        <div class="cont-hide">Content 6</div>
      </div>
    </div>
  </div>
</section>

Answer 1

我自己解决了这个问题，这里是答案。如果有更好的请推荐，谢谢:)

//display first item
$('.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');
});

//remove and display clicked items
$('.slick-item').on('click', function() {
    var carouselTexts = $(".slick-item .cont-hide");
    var clickedNum = $(".slick-slide").index(this);
            
    carouselTexts.not(clickedNum).css('display', 'none')
    carouselTexts.eq(clickedNum).css('display', 'initial');
});

Slick Carousel：隐藏非中心（活动）内容

Slick Carousel: Hide non center(active) contents

html

javascript

jquery

carousel

slick.js