안녕하세요 swiper 관련 질문 드릴께요
본문
아래 코드가 크롬에서는 정상 동작을 하는데 사파리에서 동작이 안됩니다.
뭐가 잘못된건지 도저히 모르겠어요 도움이 필요합니다.
var swiperTabsNav = new Swiper('.swiper-tabs-nav', {
slidesPerView: 'auto',
preventClicks: true,
preventClicksPropagation: false,
autoHeight: false,
observer: true,
observeParents: true
});
var $snbSwiperItem = $('.swiper-tabs-nav .swiper-wrapper .swiper-slide span');
$snbSwiperItem.click(function(){
var target = $(this).parent();
$snbSwiperItem.parent().removeClass('active')
target.addClass('active');
muCenter(target);
})
function muCenter(target){
var snbwrap = $('.swiper-tabs-nav .swiper-wrapper');
var targetPos = target.position();
var box = $('.swiper-tabs-nav');
var boxHarf = box.width()/2;
var pos;
var listWidth=0;
snbwrap.find('.swiper-slide').each(function(){ listWidth += $(this).outerWidth(); })
var selectTargetPos = targetPos.left + target.outerWidth()/2;
if (selectTargetPos <= boxHarf) { // left
pos = 0;
}else if ((listWidth - selectTargetPos) <= boxHarf) { //right
pos = listWidth-box.width();
}else {
pos = selectTargetPos - boxHarf;
}
setTimeout(function(){snbwrap.css({
"transform": "translate3d("+ (pos*-1) +"px, 0, 0)",
"transition-duration": "500ms"
})}, 200);
if (document.querySelector('.service-wrap').scrollTop) {
document.querySelector('.service-wrap').scrollTo(0, 0)
}
}
// Swiper Content
var swiperTabsContent = new Swiper('.swiper-tabs-content', {
spaceBetween: 0,
loop:false,
autoHeight: true,
longSwipes: true,
resistanceRatio: 0, // Disable First and Last Swiper
watchOverflow: true,
loopedSlides: 5,
thumbs: {
swiper: swiperTabsNav,
},
});
swiperTabsContent.on('slideChange', function() {
muCenter($(document.querySelector('div.swiper-slide-thumb-active')))
})