https://far.ru/local/templates/FAR2025/js/swipers.js

1import changeActiveSlide from "./changeActiveSlide.js"
2import inactiveSlides from "./inactiveSlides.js"
3import sliderMap from "./sliderMap.js"
4
5export default function swipers() {
6	const mainSwiper = new Swiper(".main-swiper", {
7		direction: "horizontal",
8		loop: true,
9
10		pagination: {
11			el: ".swiper-pagination",
12		},
13
14		navigation: {
15			nextEl: ".main-swiper-button-next",
16			prevEl: ".main-swiper-button-prev",
17		},
18	})
19
20	const ourProductsSwiper = new Swiper(".our__products-swiper", {
21		direction: "horizontal",
22		/* slidesPerView: 5, */
23		spaceBetween: 15,
24		/* centeredSlides: true, */
25		loop: true,
26		loopedSlides: 11, // столько, сколько у тебя реальных слайдов
27		/* watchOverflow: true, */
28		// важно: не используем loopAdditionalSlides
29
30		navigation: {
31			nextEl: ".our__products-swiper-button-next",
32			prevEl: ".our__products-swiper-button-prev",
33		},
34
35		breakpoints: {
36			0: {
37				slidesPerView: 1.5,
38				spaceBetween: 15,
39				/* centeredSlides: true, */
40				loop: true,
41				loopedSlides: 11,
42			},
43			600: {
44				slidesPerView: 2,
45				spaceBetween: 15,
46				/* centeredSlides: true, */
47				loop: true,
48				loopedSlides: 11,
49			},
50			768: {
51				slidesPerView: 2.5,
52				spaceBetween: 20,
53				/* centeredSlides: true, */
54				loop: true,
55				loopedSlides: 11,
56			},
57			1000: {
58				slidesPerView: 3.5,
59				spaceBetween: 15,
60				/* centeredSlides: true, */
61				loop: true,
62				loopedSlides: 11,
63			},
64			1280: {
65				slidesPerView: 2.5,
66				spaceBetween: 15,
67				/* centeredSlides: true, */
68				/* loop: true, */
69				loopedSlides: 11,
70			},
71		},
72	})
73
74	const mainSwiperModelPage = new Swiper(".main__swiper", {
75		// Optional parameters
76
77		slidesPerView: 1,
78		// Navigation arrows
79		navigation: {
80			nextEl: ".swiper-button-next",
81			prevEl: ".swiper-button-prev",
82		},
83
84		on: {
85			init(swiper) {
86				// В момент инициализации передаём инстанс
87				inactiveSlides()
88				changeActiveSlide(swiper, ".swiper__product__container")
89			},
90			slideChange(swiper) {
91				sliderMap(swiper, ".swiper__product__container")
92			},
93		},
94
95		breakpoints: {
96			// when window width is >= 320px
97			380: {
98				slidesPerView: 1,
99			},
100		},
101	})
102
103	const modelSwiper = new Swiper(".model__swiper", {
104		// Optional parameters
105		loop: true,
106		slidesPerView: 2.5,
107		spaceBetween: 30,
108		pagination: {
109			el: ".swiper-pagination",
110			type: "bullets", // 'bullets' | 'fraction' | 'progressbar' | 'custom'
111			clickable: true,
112		},
113		// Navigation arrows
114
115		navigation: {
116			nextEl: ".model-swiper-next",
117			prevEl: ".model-swiper-prev",
118		},
119
120		breakpoints: {
121			// when window width is >= 320px
122			320: {
123				slidesPerView: 1.1,
124				spaceBetween: 5,
125			},
126			380: {
127				slidesPerView: 1.1,
128				spaceBetween: 10,
129			},
130			// when window width is >= 480px
131			480: {
132				slidesPerView: 1.1,
133				spaceBetween: 10,
134			},
135			// when window width is >= 640px
136			640: {
137				slidesPerView: 1.1,
138			},
139
140			992: {
141				slidesPerView: 1.5,
142			},
143
144			1280: {
145				slidesPerView: 2.5,
146			},
147		},
148	})
149
150	return mainSwiperModelPage
151}
152
153//# sourceMappingURL=swipers.js.map