Issue with Slider Filtering on Landing Page

[Toriya]

Hi everyone!

I'm building a landing page and trying to implement a slider with filtering. I found an example on CodePen (https://codepen.io/chiz-developer/pen/ybxBKy) that demonstrates how to do this. However, when I apply a similar approach to my landing page, I encounter a problem: when I click the filter buttons, my slider disappears. Everything reappears when I click the "All" button.

I’m a beginner in JavaScript and web development, so I might have made a mistake. Could you help me figure out what might be going wrong and suggest alternative solutions for implementing slider filtering?

I would greatly appreciate any assistance!

Thank you!

<section class="section product">
<div class="containe r">
<div class="product_ _filter product__filter-buttons">
<button class="product_ _filter-btn product__all" data-filter="all" type="button">A ll</button>
<button class="product_ _filter-btn product__chair" data-filter="product __chair" type="button">C hair</button>
<button class="product_ _filter-btn product__beds" data-filter="product __beds" type="button">B eds</button>
<button class="product_ _filter-btn product__sofa" data-filter="product __sofa" type="button">S ofa</button>
<button class="product_ _filter-btn product__lamp" data-filter="product __lamp" type="button">L amp</button>
</div>

<ul class="product_ _slider">
<li class="product_ _slide product__sofa">
<article class="productC art">
<img class="productC art__img" src="images/product/nyantuy.png" alt="">
<div class="productC art__content">
<p class="productC art__subtitle"> Chair</p>
<h3 class="productC art__title">Anj ay Chair</h3>
</div>
</article>
</li>

<li class="product_ _slide product__chair" >
<article class="productC art">
<img class="productC art__img" src="images/product/anjay.png" alt="">
<div class="productC art__content">
<p class="productC art__subtitle"> Chair</p>
<h3 class="productC art__title">Anj ay Chair</h3>
</div>
</article>
</li>

<li class="product_ _slide product__beds">
<article class="productC art">
<img class="productC art__img" src="images/product/baltsar.png" alt="">
<div class="productC art__content">
<p class="productC art__subtitle"> Chair</p>
<h3 class="productC art__title">Anj ay Chair</h3>
</div>
</article>
</li>

<li class="product_ _slide product__lamp">
<article class="productC art">
<img class="productC art__img" src="images/product/sakarias.png" alt="">
<div class="productC art__content">
<p class="productC art__subtitle"> Chair</p>
<h3 class="productC art__title">Anj ay Chair</h3>
</div>
</article>
</li>
</ul>

</div>
</section>

$(function() {

$(".product__sl ider").slick({
slidesToShow: 4,
slidesToScroll: 4,
arrows: true,
});

$(".product__fi lter .product__chair .product__beds .product__sofa .product__lamp" ).on('click', function(){
var filter = $(this).data('f ilter');
$(".product__sl ider").slick('s lickUnfilter');

if(filter == 'product__chair '){
$(".product__sl ider").slick('s lickFilter','.p roduct__chair') ;
}
else if(filter == 'product__beds' ){
$(".product__sl ider").slick('s lickFilter','.p roduct__beds');
}
else if(filter == 'product__sofa' ){
$(".product__sl ider").slick('s lickFilter','.p roduct__sofa');
}
else if(filter == 'product__lamp' ){
$(".product__sl ider").slick('s lickFilter','.p roduct__lamp');
}
else if(filter == 'product__all') {

$(".product__sl ider").slick('s lickUnfilter');
}

})

});

[dev7060]

Could you post the CSS to reproduce the output and maybe use [code] tags?