title: Slider with tabs
body: <p>I have a slider tab with text and a related background images to it.when ever I click to the slider tab the related image should visible with sliding animation it. The problem occurs in slider images the If condition is not working when ever I click again to the image it display none. `</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="ce-slider-wrapper"&gt;
    &lt;div class="ce-slider-images-wrapper" id="csw"&gt;
      &lt;div class="ce-slider-image active-frame" id="ce-img1C"&gt;
        &lt;img src="https://cdn2.hubspot.net/hubfs/5215930/core-experience/svasahome.png" alt="Core Experience"&gt;
      &lt;/div&gt;
      &lt;div class="ce-slider-image" id="ce-img2C"&gt;
        &lt;img src="https://cdn2.hubspot.net/hubfs/5215930/core-experience/Livingroom%20Classic%201.png" alt="Core Experience"&gt;
      &lt;/div&gt;
      &lt;div class="ce-slider-image" id="ce-img3C"&gt;
        &lt;img src="https://cdn2.hubspot.net/hubfs/5215930/core-experience/indivillage.png" alt="Core Experience"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ce-slider-thumbs" id="ce-thumbs"&gt;
      &lt;div class="ce-slider-content"&gt;
        &lt;div class="ce-desc" id="ce-img1"&gt;
          &lt;div class="ce-desc-subheading"&gt;
            &lt;div class="ce-desc-line"&gt;&lt;/div&gt;
            &lt;p&gt;01 / SVASA HOMES&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="ce-desc-text"&gt;
            &lt;p&gt;The Revival of Ancient Wisdom&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ce-slider-content"&gt;
        &lt;div class="ce-desc" id="ce-img2"&gt;
          &lt;div class="ce-desc-subheading"&gt;
            &lt;div class="ce-desc-line"&gt;&lt;/div&gt;
            &lt;p&gt;02 / VAYATHI WEAVES&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="ce-desc-text"&gt;
            &lt;p&gt;Weaving A Grand New Story&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ce-slider-content"&gt;
        &lt;div class="ce-desc" id="ce-img3"&gt;
          &lt;div class="ce-desc-subheading"&gt;
            &lt;div class="ce-desc-line"&gt;&lt;/div&gt;
            &lt;p&gt;03 / THOTA&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="ce-desc-text"&gt;
            &lt;p&gt;Uplifting Farmers From The Ground Up&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
    $('.ce-slider-thumbs').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
      autoplay: true,
      infinite: true,
      arrows: false,
      dots: false,
      fade: false,
      centerMode: false,
      autoplaySpeed: 2000,
      focusOnSelect: true,
      draggable: false
    });
  
    $('#ce-thumbs .ce-desc:not(:first)').addClass('inactive');
    $('.ce-slider-image').hide();
    $('.active-frame').show();
  
    $('.ce-desc').click(function() {
      var css = $(this).attr('id');
      if ($(this).hasClass('inactive')) { //this is the start of our condition 
        $('.ce-desc').addClass('inactive');
        $(this).removeClass('inactive');
        $(this).addClass('active-tab');
        $('.ce-slider-image').hide();
        $('#' + css + 'C').css('display', 'block');
      }
    });
  
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ce-slider-wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  
  .ce-slider-image {
    width: 100%;
    height: 100vh;
  }
  
  .ce-slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .ce-slider-thumbs {
    position: absolute;
    bottom: 20px;
    left: 0px;
    right: 0px;
    display: flex;
    width: 60%;
    margin: auto;
    outline: none;
    justify-content: space-between;
  }
  
  .ce-slider-content {
    width: 30%;
    color: #fff;
  }
  
  .ce-desc {
    display: flex;
    flex-direction: column;
  }
  
  .ce-desc-line {
    width: 180px;
    height: 5px;
    background: #b7b7b7;
    opacity: 0.5;
  }
  
  .ce-desc-subheading p {
    font-size: 14px;
    color: #fff;
    font-family: arial;
    letter-spacing: 0.35rem;
  }
  
  .slick-cloned {
    display: none;
  }
  </code></pre>
  
  <p>I have a slider tab with text and a related background images to it.when ever I click to the slider tab the related image should visible with sliding animation.
  The problem occurs in slider images the If condition is not working when ever I click again to the image it display none it is no.</p>