menu

arrow_back Why doesn't the filter work?

by
1 vote
<!DOCTYPE html>
<html lang="en"><b><i></i></b>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style/bootstrap.min.css">
<script src="https://kit.fontawesome.com/2d3f6e9ee4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="container">
<ul class="category__menu">
<li class="category__menu_items allPost" data-category="allPost">all color</li>
<li class="category__menu_items orange" data-category="orange">orange</li>
<li class="category__menu_items olive" data-category="olive">olive</li>
<li class="category__menu_items silver" data-category="silver">silver</li>
<li class="category__menu_items aqua" data-category="aqua">aqua</li>
</ul>

<div class="slider">
<div class="slider__items orange"></div>
<div class="slider__items olive"></div>
<div class="slider__items silver"></div>
<div class="slider__items aqua"></div>
<div class="slider__items olive"></div>
<div class="slider__items orange"></div>
<div class="slider__items silver"></div>
<div class="slider__items orange"></div>
<div class="slider__items aqua"></div>
<div class="slider__items aqua"></div>

</div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
$(function(){
$('.slick').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
});


$('.category__menu li').on('click', function() {
var filterClass = $(this).data('category');
$('.slick').slick('slickUnfilter');
$('.slick').slick('slickFilter', filterClass);
});


});

1 Answer

by
 
Best answer
0 votes
<div class="slider">

$('.slick').slick({

So is it slider or slick? You'd better make up your mind.

data-category="orange"

var filterClass = $(this).data('category');

$('.slick').slick('slickFilter', filterClass);

Somewhere there is a dot missing - the names of classes, they are denoted by a dot at the beginning.

Also, resetting the filter (item "all color") will not work - this must be handled separately:

$('.category__menu').on('click', 'li', function() {
$('.slider').slick('slickUnfilter');

const category = $(this).data('category');
if (category !== 'allPost') {
$('.slider').slick('slickFilter', `.${category}`);
}
});