https://dereta.rs/templates/B2C/skins/main/js/custom-fragments/custom-swiper-init.js

1const productPreviewSwiper = new Swiper('.product-preview-swiper', {
2  pagination: {
3    el: '.swiper-pagination',
4    clickable: true,
5  },
6
7  // Lazy loading:
8  preloadImages: false,
9  // watchSlidesProgress: true,
10  lazy: {
11    enabled: true,
12    loadPrevNext: true,
13    checkInView: true,
14    // loadOnTransitionStart: true,
15  },
16
17  touchAngle: 30,
18  spaceBetween: 10,
19
20  breakpoints: {
21    0: {
22      slidesPerView: 1,
23    },
24    320: {
25      slidesPerView: 2,
26    },
27    600: {
28      slidesPerView: 3,
29    },
30    900: {
31      slidesPerView: 4,
32    },
33    1200: {
34      slidesPerView: 5,
35    },
36  },
37});
38
39//  product-banner
40// Proveri da li element postoji pre inicijalizacije
41const swiperContainer = document.querySelector('.product-preview-banner-swiper');
42
43if (swiperContainer) {
44  const productPreviewBannerSwiper = new Swiper(swiperContainer, {
45    navigation: {
46      nextEl: '.banner-prod-next',
47      prevEl: '.banner-prod-prev',
48    },
49    loop: true,
50
51    // Lazy loading:
52    // preloadImages: false,
53    // lazy: {
54    //   enabled: true,
55    //   loadPrevNext: true,
56    //   checkInView: true,
57    // },
58    slidesPerView: 3,
59    touchAngle: 30,
60    spaceBetween: 15,
61
62    on: {
63      init: function (swiper) {
64        console.log('Active Index on Init:', swiper.activeIndex);
65      },
66      slideChange: function (swiper) {
67        setTimeout(() => {
68          updateBannerContent(swiper.slides[swiper.activeIndex - 1]); // Prikaz aktivnog slajda
69        }, 300);
70      },
71    },
72  });
73
74  // Dodajemo ručnu kontrolu kada kliknemo na strelice
75  const nextButton = document.querySelector('.banner-prod-next');
76  const prevButton = document.querySelector('.banner-prod-prev');
77
78  if (nextButton) {
79    nextButton.addEventListener('click', function () {
80      showNextInactiveSlide();
81    });
82  }
83
84  if (prevButton) {
85    prevButton.addEventListener('click', function () {
86      showPreviousInactiveSlide();
87    });
88  }
89

90  // Funkcija za prikaz sledećeg neaktivnog slajda
91  function showNextInactiveSlide() {
92    const activeIndex = productPreviewBannerSwiper.activeIndex;
93    const totalSlides = productPreviewBannerSwiper.slides.length;
94
95    // Tražimo sledeći slajd koji nije aktivan
96    let nextIndex = (activeIndex - 1) % totalSlides;
97
98    if (nextIndex !== activeIndex) {
99      updateBannerContent(productPreviewBannerSwiper.slides[nextIndex]);
100    }
101  }
102
103  // Funkcija za prikaz prethodnog neaktivnog slajda
104  function showPreviousInactiveSlide() {
105    const activeIndex = productPreviewBannerSwiper.activeIndex;
106    const totalSlides = productPreviewBannerSwiper.slides.length;
107
108    // Tražimo prethodni slajd koji nije aktivan
109    let prevIndex = (activeIndex - 1 + totalSlides) % totalSlides;
110
111    if (prevIndex !== activeIndex) {
112      updateBannerContent(productPreviewBannerSwiper.slides[prevIndex]);
113    }
114  }
115
116  // Funkcija za ažuriranje sadržaja desnog dela
117  function updateBannerContent(slide) {
118    if (slide) {
119      let activeUrl = slide.querySelector('.product').href;
120      let activeImg = slide.querySelector('img');
121      let title = slide.querySelector('.prod-title')?.innerText || '';
122      let desc = slide.querySelector('.prod-desc')?.innerText || '';
123      let price = slide.querySelector('.price')?.innerText || '';
124
125      let imgBn = document.querySelector('#banner-products .big-prod-banner .img');
126      let textBn = document.querySelector('#banner-products .big-prod-banner .details');
127
128      // Clear previous content
129      imgBn.innerHTML = '';
130      textBn.innerHTML = '';
131
132      // Insert new content
133      imgBn.insertAdjacentHTML('afterbegin', `<img src="${activeImg.src}" alt="${title}">`);
134      textBn.insertAdjacentHTML(
135        'afterbegin',
136        `<a href="${activeUrl}" class="btn text-btn dark btn-top">Zapo&ccaron;ni kupovinu</a>`
137      );
138      textBn.insertAdjacentHTML('afterbegin', `<p class="price">${price}</p>`);
139      textBn.insertAdjacentHTML('afterbegin', `<p class="desc">${desc}</p>`);
140      textBn.insertAdjacentHTML('afterbegin', `<p class="title">${title}</p>`);
141    } else {
142      console.log('Nema neaktivnog slajda');
143    }
144  }
145}
146
147const brandsSwiper = new Swiper('#brand-slider', {
148  pagination: {
149    el: '.swiper-pagination',
150    clickable: true,
151  },
152
153  // navigation: {
154  //   nextEl: '.brand-slider-next',
155  //   prevEl: '.brand-slider-prev',
156  // },
157
158  // Lazy loading:
159  preloadImages: false,
160  // watchSlidesProgress: true,
161  lazy: {
162    enabled: true,
163    loadPrevNext: true,
164    checkInView: true,
165    // loadOnTransitionStart: true,
166  },
167
168  touchAngle: 30,
169  spaceBetween: 10,
170
171  breakpoints: {
172    0: {
173      slidesPerView: 1,
174    },
175    320: {
176      slidesPerView: 2,
177    },
178    500: {
179      slidesPerView: 3,
180    },
181    700: {
182      slidesPerView: 4,
183    },
184    900: {
185      slidesPerView: 5,
186    },
187    1100: {
188      slidesPerView: 6,
189    },
190    1300: {
191      slidesPerView: 7,
192    },
193  },
194});
195
196const brandsSwiperAutor = new Swiper('#brand-slider-autor', {
197  // navigation: {
198  //   nextEl: '.brand-author-next',
199  //   prevEl: '.brand-author-prev',
200  // },
201  pagination: {
202    el: '.swiper-pagination',
203    clickable: true,
204  },
205
206  // // Lazy loading:
207  // preloadImages: false,
208  // // watchSlidesProgress: true,
209  // lazy: {
210  //   enabled: true,
211  //   loadPrevNext: true,
212  //   checkInView: true,
213  //   // loadOnTransitionStart: true,
214  // },
215
216  touchAngle: 30,
217  spaceBetween: 20,
218
219  breakpoints: {
220    0: {
221      slidesPerView: 1,
222      // spaceBetween: 30
223    },
224    320: {
225      slidesPerView: 2,
226      // spaceBetween: 30
227    },
228    500: {
229      slidesPerView: 3,
230      // spaceBetween: 30
231    },
232    700: {
233      slidesPerView: 4,
234      // spaceBetween: 30
235    },
236    900: {
237      slidesPerView: 5,
238      // spaceBetween: 30
239    },
240    1100: {
241      slidesPerView: 6,
242      // spaceBetween: 30
243    },
244    1300: {
245      slidesPerView: 7,
246      // spaceBetween: 30
247    },
248  },
249});
250
251const homeBlogSwiper = new Swiper('#topics-of-blog', {
252  pagination: {
253    el: '.swiper-pagination',
254    clickable: true,
255  },
256
257  // Lazy loading:
258  preloadImages: false,
259  // watchSlidesProgress: true,
260  lazy: {
261    enabled: true,
262    loadPrevNext: true,
263    checkInView: true,
264    // loadOnTransitionStart: true,
265  },
266
267  touchAngle: 30,
268
269  breakpoints: {
270    0: {
271      slidesPerView: 1,
272    },
273    600: {
274      slidesPerView: 2,
275      spaceBetween: 10,
276    },
277    800: {
278      slidesPerView: 3,
279      spaceBetween: 10,
280    },
281  },
282});
283
284const benefitsSwiper = new Swiper('#benefits-slider', {
285  pagination: {
286    el: '.swiper-pagination',
287    clickable: true,
288  },
289
290  touchAngle: 30,
291
292  breakpoints: {
293    0: {
294      slidesPerView: 1,
295    },
296    600: {
297      slidesPerView: 2,
298    },
299    800: {
300      slidesPerView: 3,
301    },
302  },
303});
304
305const homeBannerSwiper = new Swiper('#home-banner-swiper.style1-banner', {
306  pagination: {
307    el: '.swiper-pagination',
308    clickable: true,
309  },
310  autoplay: {
311    delay: 5000,
312  },
313  touchAngle: 30,
314  slidesPerView: 1,
315  spaceBetween: 30,
316
317  // Lazy loading:
318  // preloadImages: false,
319  watchSlidesProgress: true,
320  // lazy: {
321  //   enabled: true,
322  //   loadPrevNext: true,
323  //   checkInView: true,
324  //   // loadOnTransitionStart: true
325  // },
326});
327
328const homeBannerSwiper12 = new Swiper('#home-banner-swiper.style12-banner', {
329  pagination: {
330    el: '.swiper-pagination',
331    clickable: true,
332  },
333  autoplay: {
334    delay: 15000,
335  },
336  touchAngle: 30,
337  slidesPerView: 1,
338  spaceBetween: 30,
339
340  // Lazy loading:
341  // preloadImages: false,
342  watchSlidesProgress: true,
343  // lazy: {
344  //   enabled: true,
345  //   loadPrevNext: true,
346  //   checkInView: true,
347  //   // loadOnTransitionStart: true
348  // },
349});
350
351const homeBannerSwiper2 = new Swiper('#home-banner-swiper.style2-banner', {
352  pagination: {
353    el: '.swiper-pagination',
354    clickable: true,
355  },
356  autoplay: {
357    delay: 5000,
358  },
359  // touchAngle: 30,
360  slidesPerView: 1,

361  centeredSlidesBounds: true,
362  spaceBetween: 30,
363  loop: true,
364  breakpoints: {
365    768: {
366      centeredSlides: true,
367      slidesPerView: 'auto',
368      slidesPerGroup: 1,
369      spaceBetween: 30,
370    },
371  },
372});
373
374const homeCateSwiper = new Swiper('#cateHomeSwiper', {
375  // pagination: {
376  //   el: '.swiper-pagination',
377  //   clickable: true,
378  // },
379
380  navigation: {
381    nextEl: '.cate-home-next',
382    prevEl: '.cate-home-prev',
383  },
384
385  // // Lazy loading:
386  // preloadImages: false,
387  // watchSlidesProgress: true,
388  // lazy: {
389  //   enabled: true,
390  //   loadPrevNext: true,
391  //   checkInView: true,
392  //   // loadOnTransitionStart: true,
393  // },
394
395  touchAngle: 30,
396  spaceBetween: 10,
397
398  breakpoints: {
399    0: {
400      slidesPerView: 1,
401    },
402    320: {
403      slidesPerView: 2,
404    },
405    600: {
406      slidesPerView: 3,
407    },
408    700: {
409      slidesPerView: 4,
410    },
411    900: {
412      slidesPerView: 5,
413    },
414    1200: {
415      slidesPerView: 6,
416    },
417    1400: {
418      slidesPerView: 7,
419    },
420  },
421});
422
423window.categMatchingIndex = -1;
424
425window.initCategSwiper = function () {
426  try {
427    if (window.categSwiper && typeof window.categSwiper.destroy === 'function') {
428      window.categSwiper.destroy(true, true);
429    }
430  } catch (err) {
431    console.log('error destroying categSwiper', err);
432  }
433
434  window.categSwiper = new Swiper('#swiperCateg', {
435    // slidesPerView: 3,
436    // freeMode: true,
437    // freeModeSticky: true,
438    touchAngle: 30,
439    spaceBetween: 6,
440
441    breakpoints: {
442      0: {
443        slidesPerView: 1,
444      },
445      400: {
446        slidesPerView: 2,
447      },
448      640: {
449        slidesPerView: 3,
450      },
451      780: {
452        slidesPerView: 4,
453      },
454      950: {
455        slidesPerView: 5,
456      },
457      1200: {
458        slidesPerView: 6,
459      },
460      // 1440: {
461      //   slidesPerView: 7,
462      // },
463    },
464
465    // pagination: {
466    //     el: ".swiper-pagination",
467    //     clickable: true,
468    // },
469    navigation: {
470      nextEl: '.swiper-button-next',
471      prevEl: '.swiper-button-prev',
472    },
473
474  });
475
476  return window.categSwiper;
477};