Задать вопрос
@Rufix
javascript

Как сделать слайдер с фильтрацией?

Пробую сделать слайдер с фильтрацией через Slick.js + Isotope.js
По отдельности все хорошо работает, но вместе - ничего.
w1zyBOO.png
<body>
  <h1>хеллоу</h1>
  <div class="filter">
    <ul>
      <li class="active" data-filter="*">Все</li>
      <li data-filter=".animals">Животные</li>
      <li data-filter=".fish">Рыбы</li>
      <li data-filter=".insects">Насекомые</li>
    </ul>
  </div>
  <div class="slider">
    <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/BEEB/production/_108557884_gettyimages-486237421.jpg"
      alt="Image" class=" item animals slider-image">
    <img
      src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1706,w_3036,x_0,y_241/f_auto,q_auto,w_1100/v1554752078/shape/mentalfloss/istock-483749258.jpg"
      alt="Image" class="item insects slider-image">
    <img src="https://www.dw.com/image/47554840_303.jpg" alt="" class="item insects slider-image">
    <img
      src="https://images.unsplash.com/photo-1522720833375-9c27ffb02a5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
      alt="" class="item fish slider-image">
    <img src="https://cdn.mos.cms.futurecdn.net/RY2EpSo74hvYXyAVpTN2Gg-320-80.jpg" alt=""
      class="item fish slider-image">
    <img src="https://i.ytimg.com/vi/G569uHzxRD4/maxresdefault.jpg" alt="" class="item animals slider-image">
    <img src="https://i.ytimg.com/vi/ZXblC3wc7tM/maxresdefault.jpg" alt="" class="item animals slider-image">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="slick/slick.min.js"></script>
  <script src="isotope.pkgd.min.js"></script>
  <script src="script.js"></script>
</body>

$('.slider').isotope({
  itemSelector: '.item',
  layoutMode: 'fitRows'
});

$('.filter ul li').click(function () {
  $('.filter ul li').removeClass('active');
  $(this).addClass('active');

  var selector = $(this).attr('data-filter');
  $('.slider').isotope({
    filter: selector
  });
})

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1
});
  • Вопрос задан
  • 225 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
@fixeri 
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <h1>хеллоу</h1>
  <div>
    <ul class="filter">
      <li class="active" data-filter="*">Все</li>
      <li data-filter="animals">Животные</li>
      <li data-filter="fish">Рыбы</li>
      <li data-filter="insects">Насекомые</li>
    </ul>
  </div>

  <div class="slider">
    <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/BEEB/production/_108557884_gettyimages-486237421.jpg" alt="Image" class="item animals slider-image">
    <img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1706,w_3036,x_0,y_241/f_auto,q_auto,w_1100/v1554752078/shape/mentalfloss/istock-483749258.jpg" alt="Image" class="item insects slider-image">
    <img src="https://www.dw.com/image/47554840_303.jpg" alt="" class="item insects slider-image">
    <img src="https://images.unsplash.com/photo-1522720833375-9c27ffb02a5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="" class="item fish slider-image">
    <img src="https://cdn.mos.cms.futurecdn.net/RY2EpSo74hvYXyAVpTN2Gg-320-80.jpg" alt="" class="item fish slider-image">
    <img src="https://i.ytimg.com/vi/G569uHzxRD4/maxresdefault.jpg" alt="" class="item animals slider-image">
    <img src="https://i.ytimg.com/vi/ZXblC3wc7tM/maxresdefault.jpg" alt="" class="item animals slider-image">
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>
  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

  <script type="text/javascript">

$(document).ready(function() {
        $('.filter li').click(function () {
          if( !$(this).hasClass("active") ) {
            $(this).parent().find('.active').removeClass('active');
            $(this).addClass('active');
            let selector = $(this).attr("data-filter");

            $(".slick-track").isotope({
              itemSelector: ".item",
              filter: (selector === "*") ? "*" : "." + selector
            });
          }
        });



        $('.slider').slick({
          slidesToShow: 3,
          slidesToScroll: 1
        });
      });

</script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка и поддержка проектов на ruby
26 нояб. 2024, в 10:21
1200 руб./в час
Дизайн мобильной игры + UI/ux
26 нояб. 2024, в 10:14
50000 руб./за проект
Модуль интеграции с 1C на Python
26 нояб. 2024, в 10:09
40000 руб./за проект
Ещё заказы