Slick Carousel: Hide non center(active) contents

user_4148141 0
Viewed 485

I want to hide all the contents except the center one.

enter image description here

Take above image as example, only "Content 1" is showing, the rest are hidden. But the images are still showing.

When click to 2nd image, "Content 2" will show instead and hide "Content 1".

enter image description here

I try to use jquery find "slick-center" class and remove the hidden content, but it's not working. Hoping that some of you could provide me with some advice. Thank you!

$('.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>

slick.js carousel html jquery javascript
1 Answers

Solved the issue by myself and here is the answer. If you have the better one, please suggest, thank you :)

//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');
});
user_41481410
Related