Filterable gallery using slick.js

I’m trying to create filterable gallery with differents buttons but when I click on them the filter is working but that let empty space in the gallery for the other pictures. I tried to use different script from the forum but that always let empty space.

This is an exemple of the HTML :

<section>
    <ul>
      <li class="list active" data-filter="Tout">Tout</li>
      <li class="list" data-filter="Langue">Langue</li>
      <li class="list" data-filter="Informatique">Informatique</li>
      <li class="list" data-filter="Design">Design</li>
      <li class="list" data-filter="Autre">Autre</li>
    </ul>
  
    <div class="post-slider">
      <i class="fas fa-chevron-left prev"></i>
      <i class="fas fa-chevron-right next"></i>

       <!--FORMATION INFORMATIQUE-->

      <div class="post-wrapper">

        <div class="post Informatique">
          <img src="informatique 1.jpg" alt="" class="slider-image">
          <div class="post-info">
            <h4><a href="#">Formation en Informatique</a></h4>
            <i class="fas fa-book">Apprenez l'informatique !</i>
          </br>
            <i class="fas fa-check">Formation avec une certification à la fin !</i>
          </div>
        </div>

        <div class="post Langue">
          <img src="langue1.png" alt="" class="slider-image">
          <div class="post-info">
            <h4><a href="#">Formation en Anglais</a></h4>
            <i class="fas fa-book">Apprenez l'Anglais !</i>
          
          </br>
            <i class="fas fa-check">Formation avec une certification à la fin !</i>
          </div>
        </div>

      
        <div class="post Design">
          <img src="design1.png" alt="" class="slider-image">
          <div class="post-info">
            <h4><a href="#">Formation Photoshop</a></h4>
            <i class="fas fa-book">Apprenez l'utilisation de Photoshop !</i>
           
          </br>
            <i class="fas fa-check">Formation avec une certification à la fin !</i>
          </div>
        </div>

        <div class="post Autre">
          <img src="autre1.jpg" alt="" class="slider-image">
          <div class="post-info">
            <h4><a href="#">Formation Secrétariat</a></h4>
            <i class="fas fa-book">Apprenez le Secrétariat</i>
           
          </br>
            <i class="fas fa-check">Formation avec une certification à la fin !</i>
          </div>
        </div>

      </div>
    </div>
  </section>

And the JavaScript :

  $('.post-wrapper').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplaySpeed: 2250,
      nextArrow:$('.next'),
      prevArrow:$('.prev'),
      infinite:true,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });

    $('.list').click(function(){
      const value = $(this).attr('data-filter');
      if(value == 'Tout'){
        $('.post').show('1000');
      }
      else{
        $('.post').not('.'+value).hide('1000')
        $('.post').filter('.'+value).show('1000')
      }
    })
    $('.list').click(function(){
      $(this).addClass('active').siblings().removeClass('active');
    })
  });

This is the code pen : https://codepen.io/MrBonsoir/pen/abJGxPv

Thanks for your help

Answer

Slick slider has its own filtering methods. You can use them

$(document).ready(function() {
  $('.post-wrapper').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplaySpeed: 2250,
    nextArrow: $('.next'),
    prevArrow: $('.prev'),
    infinite: true,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

  $('.list').click(function() {
    if(!$(this).is('.active')){
      var category = $(this).data('filter'),
          slider = $('.post-wrapper');
          
      $(this).addClass('active').siblings().removeClass('active');
      
      slider.slick('slickUnfilter'); //reset slider filter
      if(category != 'Tout'){
        slider.slick('slickFilter','.'+category);
      }
    }       
  })
});

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.post-slider {
  position: relative;
}

.post-slider .next {
  position: absolute;
  top: 50%;
  right: 30px;
  font-size: 2em;
  color: #2980B9;
  cursor: pointer;
}

.post-slider .prev {
  position: absolute;
  top: 50%;
  left: 30px;
  font-size: 2em;
  color: #2980B9;
  cursor: pointer;
}

.post-slider .post-wrapper {
  width: 84%;
  height: 350px;
  margin: 0px auto;
  overflow: hidden;
  padding: 10px 0px 10px 0px;
}

@keyframes fadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
.post-slider .post-wrapper .post {
  height: 300px;
  width: 330px;
  margin: 0px 10px;
  display: inline-block;
  background: #6DD5FA;
  border-radius: 5px;
  box-shadow: 1rem 1rem 1rem -1rem #a0a0a033;
  animation: fadeIn .5s ease;
}

.post-slider .post-wrapper .post .post-info {
  height: 130px;
  padding: 0px 5px;
}

.post-slider .post-wrapper .post .slider-image {
  width: 100%;
  height: 200px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.post-slider h4 {
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff
}

.post-slider a {
  text-decoration: none;
  color: inherit;
}

.page-wrapper a:hover {
  color: black;
}


/* FILTRE BOUTON */

section {
  padding: 20px;
  margin: 40px auto;
}

section ul {
  display: flex;
  margin-bottom: 10px;
}

section ul li {
  list-style: none;
  background: #eee;
  padding: 8px 20px;
  margin: 8px;
  letter-spacing: 1px;
  cursor: pointer;
}

section ul li.active {
  background: #2980B9;
}

section ul li:hover {
  background: #2980B9;
}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<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>
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />

<section>
  <ul>
    <li class="list active" data-filter="Tout">Tout</li>
    <li class="list" data-filter="Langue">Langue</li>
    <li class="list" data-filter="Informatique">Informatique</li>
    <li class="list" data-filter="Design">Design</li>
    <li class="list" data-filter="Autre">Autre</li>
  </ul>

  <div class="post-slider">
    <i class="fas fa-chevron-left prev"></i>
    <i class="fas fa-chevron-right next"></i>

    <!--FORMATION INFORMATIQUE-->

    <div class="post-wrapper">

      <div class="post Informatique">
        <img src="informatique 1.jpg" alt="" class="slider-image">
        <div class="post-info">
          <h4><a href="#">Formation en Informatique</a></h4>
          <i class="fas fa-book">Apprenez l'informatique !</i>
          <br>
          <i class="fas fa-check">Formation avec une certification à la fin !</i>
        </div>
      </div>

      <div class="post Langue">
        <img src="langue1.png" alt="" class="slider-image">
        <div class="post-info">
          <h4><a href="#">Formation en Anglais</a></h4>
          <i class="fas fa-book">Apprenez l'Anglais !</i>

          <br>
          <i class="fas fa-check">Formation avec une certification à la fin !</i>
        </div>
      </div>


      <div class="post Design">
        <img src="design1.png" alt="" class="slider-image">
        <div class="post-info">
          <h4><a href="#">Formation Photoshop</a></h4>
          <i class="fas fa-book">Apprenez l'utilisation de Photoshop !</i>

          <br>
          <i class="fas fa-check">Formation avec une certification à la fin !</i>
        </div>
      </div>

      <div class="post Autre">
        <img src="autre1.jpg" alt="" class="slider-image">
        <div class="post-info">
          <h4><a href="#">Formation Secrétariat</a></h4>
          <i class="fas fa-book">Apprenez le Secrétariat</i>

          <br>
          <i class="fas fa-check">Formation avec une certification à la fin !</i>
        </div>
      </div>

    </div>
  </div>
</section>