swiper

Open full view…

Swiper on resize browser stops working/sliding

galanthus
Fri, 09 Feb 2018 12:03:40 GMT

Hi, I have a problem.. when i resize the swiper slider it stops working and i have to hard refresh in order to make it work. Also when resizing the 2 connected sliders are not staying on centered position. My code: (() => { let topSlider = new Swiper('.swiper-container-top5', { slidesPerView: 'auto', centeredSlides: false, spaceBetween: 20, slidesOffsetAfter: 20, slidesOffsetBefore: 20, breakpoints: { 767: { spaceBetween: 15, slidesOffsetAfter: 15, slidesOffsetBefore: 5 } } }); let Slide = document.querySelector('.slides'), slideContent = null, wrapper = document.querySelector('.top5__slider .wrap'), wrapperWidth = 0; if(Slide) { slideContent = Slide.querySelectorAll('.content__item'); if(wrapper === null) { return; } function resizeWrapper() { wrapperRect = wrapper.getBoundingClientRect(); wrapperWidth = wrapperRect.width; _offset = _offset = '50% - ' + (wrapperWidth / 2); slideContent[0].style.marginLeft = "calc("+_offset + "px)"; topSlider.update(); } let _offset = '50% - ' + (wrapperWidth / 2); slideContent[0].style.marginLeft = "calc("+_offset + "px)"; let wrapperRect = wrapper.getBoundingClientRect(); resizeWrapper(); window.addEventListener('resize', function () { resizeWrapper(); }); } })();