I am new here, so please don’t be too aggressive on me if I do something wrong. I am new in programming and quite a while I was checking the articles as an unregistered user if I had some issues. But right now I do have an issues which I can not find here and unfortunately I can not solve it by myself…
The issue is related to Swiper Slider. It did work as it should, but after some changes I made to my project, which were not related to js, the slider did break. On my Main and Product pages I do have 2 Swiper Sliders. One is in Header, which slides photos and the second one is in Product section, which slides 3 SlidesPerView ( in total 4 or more slides ) The Header Slider doesn’t have any arrows, but after some changes I did, the arrows jumped from Product Slider to Header Slider and in Product slider, it started to show not just 3 SlidesPerView, but as much as it could show plus the position of slides moved from center to left or right corners… Plus each time I switch from one Tab to another, the position of slides is changing from center to left corner… Here is my js with code plus photos
const swiper = new Swiper('.image-slider', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
slidesPerView: 3,
watchOverflow: true,
slidesPerGroup: 1,
speed: 2000,
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: true
},
breakpoints: {
320: {
slidesPerView: 1,
},
480: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
}
},
observer: true,
observeParents: true,
slidesPerColumn: 1
});
new Swiper('.header-slider', {
slidesPerView: 1,
slidesPerGroup: 1,
speed: 2000,
autoplay: {
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: true
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
});
$(window).on("resize", function() {
mySwiper.autoplay.start();
mySwiper.update();
});
$('.btn-tab ul li button').on('click', function(){
var dataid = $(this).data('tag');
$('.btn-tab ul li button').removeClass('current');
$(this).addClass('current');
$('.swiper-tab-con').removeClass('current');
$('#'+dataid).addClass('current');
});
Thank you in advance for help and suggestions how to fix this!