https://gdekomfort.ru/templates/komfort/resource/js/rscomponent/productslider.js

1new class ProductsSlider extends RsJsCore.classes.component {
2    initSwipers() {
3        if (document.querySelector('.swiper-products')) {
4            document.querySelectorAll('.swiper-products').forEach(element => {
5                let params = {
6                    slidesPerView: 2,
7                    spaceBetween: 8,
8                    noSwipingSelector: '.product-card__image--multy, .product-card__image--multy *',
9                    
10                    navigation: {
11                        nextEl: '.carousel__arrow--next',
12                        prevEl: '.carousel__arrow--prev',
13                    },
14
15                    breakpoints: {
16                        1200: {
17                            spaceBetween: 24,
18                            slidesPerView: element.classList.contains('swiper-products--six') ? 6 : 5
19                        },
20                        992: {
21                            spaceBetween: 12,
22                            slidesPerView: 4
23                        },
24                        768: {
25                            slidesPerView: 2,
26                            spaceBetween: 12
27                        },
28                    }
29                };
30
31                const swiper = new Swiper(element, params);
32
33                const filterButtons = element.closest('.top-products').querySelectorAll('.top-products-filter__item');
34
35                if (filterButtons.length > 0) {
36                    filterButtons.forEach(button => {
37                        button.addEventListener('click', () => {
38                            const filterId = button.dataset.filter;
39                            this.filterSlides(swiper, filterId);
40
41                            filterButtons.forEach(btn => {
42                                btn.classList.remove('active');
43                            });
44
45                            button.classList.add('active');
46                        });
47                    });
48                }
49            });
50        }
51    }
52
53    filterSlides(swiper, filterId) {
54        const slides = swiper.el.querySelectorAll('.swiper-slide');
55

56        slides.forEach(slide => {
57            if (filterId === 'all' || slide.dataset.id === filterId) {
58                slide.style.display = 'block';
59            } else {
60                slide.style.display = 'none';
61            }
62        });
63
64        swiper.update();
65    }
66
67    onDocumentReady() {
68        this.initSwipers();
69    }
70};