Задать вопрос
@Illia_23
slick

Почему не работает фильтр?

<!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);
  });
  
  
});
  • Вопрос задан
  • 101 просмотр
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
0xD34F
@0xD34F
<div class="slider">

$('.slick').slick({

Так как правильно - slider или slick? Вы бы определились.

data-category="orange"

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

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

Где-то тут точки не хватает - имена классов, они точкой в начале обозначаются.

А ещё сброс фильтра (пункт "all color") работать не будет - это надо отдельно обрабатывать:

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

  const category = $(this).data('category');
  if (category !== 'allPost') {
    $('.slider').slick('slickFilter', `.${category}`);
  }
});
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Web разработчик (fullstack)
Складно
от 120 000 до 150 000 ₽
Ведущий системный администратор
U-System • Воронеж
от 120 000 ₽
Python Backend Разработчик
Stakewolle
от 35 000 до 45 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать сайт на Vue / Laravel
19 апр. 2024, в 11:14
65000 руб./за проект
Отрисовка дизайна главной и внутренней
19 апр. 2024, в 11:08
5000 руб./за проект
Работы по АСУТП
19 апр. 2024, в 10:59
150000 руб./за проект
Ещё заказы