안녕하세요 swiper 관련 질문 드릴께요

안녕하세요 swiper 관련 질문 드릴께요

QA

안녕하세요 swiper 관련 질문 드릴께요

답변 1

본문

아래 코드가 크롬에서는 정상 동작을 하는데 사파리에서 동작이 안됩니다.

 뭐가 잘못된건지 도저히 모르겠어요  도움이 필요합니다. 

 

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')))

    })

이 질문에 댓글 쓰기 :

답변 1

하다 못해 에러 코드라도 있어야 해결하죠 ㅎㅎ

답변을 작성하시기 전에 로그인 해주세요.
전체 2
© SIRSOFT
현재 페이지 제일 처음으로