swiper инициализация

swiper инициализация

(function() {
    var $carousel = $('.carousel');
    $carousel.each(function() {
        var swiper = new Swiper(this, {
            spaceBetween: 30,
            freeMode: true,
            centeredSlides: false,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true,
            breakpoints: {
                0: {
                    slidesPerView: 2,
                    spaceBetween: 4,
                },
                768: {
                    slidesPerColumnFill: 2,
                    slidesPerColumn: 2,
                    spaceBetween: 8,
                    slidesPerView: 3,
                },
                992: {
                    slidesPerColumnFill: 2,
                    slidesPerColumn: 2,
                    spaceBetween: 8,
                    slidesPerView: 4,
                }
            },
            pagination: {
                el: $(this).find('.swiper-pagination'),
            },
            navigation: {
            nextEl: $(this).find('.swiper-button-next')[0],
            prevEl: $(this).find('.swiper-button-prev')[0],
            },
            observer: true,
            observeParents: true,
            observeSlideChildren: true
        });
    });
}());


// Clear JS

	(function() {
		const articleCarousel = document.querySelectorAll('.js-article-carousel');
		for( i=0; i< articleCarousel.length; i++ ) {
			articleCarousel[i].classList.add('js-article-carousel--' + i);
			let slider = new Swiper('.js-article-carousel--' + i, {
				freeMode: false,
				centeredSlides: false,
				slidesPerView: 2,
				touchRatio: 0.2,
				slideToClickedSlide: true,
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
					renderBullet: function (index, className) {
						return '<span class="' + className + '">' + (index + 1) + "</span>";
					},
				},
				observer: true,
				observeParents: true,
				observeSlideChildren: true
			});
		}
	}());
	
	
	///////////////////////////////////
	
		function caruselTab1() {
		document.querySelectorAll('.carousel-tab').forEach((el, i) => {
			const carouselTumb = el.querySelector('.carousel-thumbs');
			const carouselMain = el.querySelector('.carousel-main');
			const btnNext = el.querySelector('.swiper-button-next');
			const btnPrev = el.querySelector('.swiper-button-prev');
			const pagin = el.querySelector('.swiper-pagination');

		const carouselTumbs1 = new Swiper(carouselTumb, {
			centeredSlides: false,
			slidesPerView: 1,
			touchRatio: 0.2,
			slideToClickedSlide: true,
			freeMode: true,
			loop: true,
			navigation: {
				swiper: carouselMain1,
			},
			observer: true,
			observeParents: true,
			observeSlideChildren: true,
			direction: 'horizontal',
			autoplay: {
				enabled: true,
				delay: 6000,
				disableOnInteraction: true,
			},
			breakpoints: {
				1200: {
					direction: 'vertical',
					slidesPerView: 3,
				}
			}
		});

		const carouselMain1 = new Swiper(carouselMain, {
			spaceBetween: 10,
			freeMode: true,
			centeredSlides: false,
			slidesPerView: 1,
			touchRatio: 0.2,
			slideToClickedSlide: true,
			autoplay: {
				enabled: true,
				delay: 6000,
				disableOnInteraction: true,
			},
			breakpoints: {
				1200: {
				}
			},
			loop: true,
			pagination: {
				el: pagin,
				clickable: true,
				renderBullet: function (index, className) {
					return '<span class="' + className + '">' + (index + 1) + "</span>";
				},
			},
			navigation: {
				nextEl: btnNext,
				prevEl: btnPrev,
			},
			thumbs: {
				swiper: carouselTumbs1,
			},
			observer: true,
			observeParents: true,
			observeSlideChildren: true
		});

		});
	}