Swiper Slider Navigation a SlidesPerView Broken

JavaScript
1

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

2
21360×787 237 KB 

    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!

2

Hi @LuciferInTheSky ,

It would be great if you shared the link of the working code. It is much easier to find out the error.

3

Hello nivethakrishnan72,

I did a pen with the Swiper code which I use, but I am not sure if it is enough to understand the problem I have… Maybe it is easier to visit the webpage and see the issue or tell me please what should I include more into my pen

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.