안녕하세요! 탭 안에 파라미터 작동이 안되어 문의 남깁니다!

안녕하세요! 탭 안에 파라미터 작동이 안되어 문의 남깁니다!

QA

안녕하세요! 탭 안에 파라미터 작동이 안되어 문의 남깁니다!

답변 3

본문

 안녕하세요, 왕초보 퍼블리셔입니다.. 구글링 하다가 도저히 답을 찾지 못하겠어 글 올립니다!

 

우선 html 입니다

 


      <div class="tabBox">
          <a href="#tab-1"><p class="tab-link current" data-tab="tab-1">product01</p></a>
          <a href="#tab-2"><p class="tab-link" data-tab="tab-2">product02</p></a>
          <a href="#tab-3"><p class="tab-link" data-tab="tab-3">product03</p></a>
      </div>
    <div id="tab-1" class="tab-content current">
        <ul class="slider-cont">
            <li>
                <div class="swiper-container gallery-slider slider01">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </li>
            <li>
                <div class="pro-common-txtbox">
                    <p class="txt01">product name</p>
                    <p class="txt02">txt</p>
                </div>
                <div class="swiper-container gallery-thumbs thumbs01">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                    </div>
                </div>    
            </li>
        </ul>
    </div>
 
 
    <div id="tab-2" class="tab-content current">
        <ul class="slider-cont">
            <li>
                <div class="swiper-container gallery-slider slider01">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </li>
            <li>
                <div class="pro-common-txtbox">
                    <p class="txt01">product name</p>
                    <p class="txt02">txt</p>
                </div>
                <div class="swiper-container gallery-thumbs thumbs01">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                        <div class="swiper-slide"><img src=""></div>
                    </div>
                </div>    
            </li>
        </ul>
    </div>
 

 

그리고 js 코드 입니다.


<!--탭-->
<script>
    $('.tab-link').click(function () {
    var tab_id = $(this).attr('data-tab');
    $('.tab-link').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
});
</script>
 
<!--탭 부드럽게-->
<script>
    $('.tab-content').hide();
    $('.tabBox a').bind('click', function(e){
    $('.tabBox a.on').removeClass('on');
    $('.tab-content:visible').hide();
    $(this.hash).fadeIn(400);
    $(this).addClass('on')
    e.preventDefault();
})
.filter(':eq(0)').click();
</script>
 
<!-- 프로덕트 스와이퍼01-->  
<script>
  var slider01 = new Swiper ('.slider01', {
    slidesPerView: 1,
    observer: true,
    observeParents: true,
    effect : 'fade',
    fadeEffect: { 
    crossFade: true 
},
    touchRatio: 0,//드래그 금지
    centeredSlides: true,
    loop: true,
    loopedSlides: 3,
    autoHeight : true,
});
var thumbs01 = new Swiper ('.thumbs01', {
    spaceBetween: 10,
    observer: true,
    observeParents: true,
    breakpoints: {
        1150: {
          slidesPerView: 3,
          spaceBetween: 10,
        },
        750: {
          slidesPerView: 3,
          spaceBetween: 10,
        },
        450: {
          slidesPerView: 3,
          spaceBetween: 10,
        }
    },
    loopedSlides: 3,
    loop: true,
    slideToClickedSlide: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

slider01.controller.control = thumbs01;
thumbs01.controller.control = slider01;
</script>
<!-- 프로덕트 스와이퍼02-->  
<script>
  var slider02 = new Swiper ('.slider02', {
    slidesPerView: 1,
    observer: true,
    observeParents: true,
    effect : 'fade',
    fadeEffect: { 
    crossFade: true 
},
    touchRatio: 0,//드래그 금지
    centeredSlides: true,
    loop: true,
    loopedSlides: 3,
    autoHeight : true,
});
var thumbs02 = new Swiper ('.thumbs02', {
    spaceBetween: 10,
    observer: true,
    observeParents: true,
    breakpoints: {
        1150: {
          slidesPerView: 3,
          spaceBetween: 10,
        },
        750: {
          slidesPerView: 3,
          spaceBetween: 10,
        },
        450: {
          slidesPerView: 3,
          spaceBetween: 10,
        }
    },
    loopedSlides: 3,
    loop: true,
    slideToClickedSlide: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

slider02.controller.control = thumbs02;
thumbs02.controller.control = slider02;
</script>

 

tab 안에 스와이퍼 작동시키는 방법으로, observer: true 와 observeParents: true 두 가지 코드를 입력하면 된다고 하여서 입력하였는데, 처음에는 두 탭 다 작동이 되었다가 다시 처음 탭으로 돌아가면 스와이퍼 작동이 안됩니다 ㅠㅠ

 

도움 주실 분 계실까요....

이 질문에 댓글 쓰기 :

답변 3

slider01
thumbs01

밖에없네용
밑에 스와이퍼2개도

01로되어있어여 02로 두개다 바꿔보세용

스와이프 초기화 함수가 없는 것 같습니다. 다음과 같이 해 볼 수 있을 것 같습니다.


<!-- 탭 -->
<script>
  function initializeSwiper(swiperContainer) {
    var slider = new Swiper(swiperContainer + ' .slider01', {
      // 스와이퍼 설정들...
    });
    var thumbs = new Swiper(swiperContainer + ' .thumbs01', {
      // 스와이퍼 설정들...
    });
    slider.controller.control = thumbs;
    thumbs.controller.control = slider;
  }
  $(document).ready(function () {
    $('.tabBox a').bind('click', function (e) {
      $('.tabBox a.on').removeClass('on');
      $('.tab-content:visible').hide();
      $(this.hash).fadeIn(400);
      $(this).addClass('on');
      // 탭 변경 시 스와이퍼 초기화 함수 호출
      var tabId = $(this).attr('data-tab');
      initializeSwiper("#" + tabId);
      e.preventDefault();
    }).filter(':eq(0)').click(); // 초기 탭 선택
  });
</script>
<!-- 프로덕트 스와이퍼01-->
<script>
  var slider01 = new Swiper('.slider01', {
    slidesPerView: 1,
    observer: true,
    observeParents: true,
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    },
    touchRatio: 0, // 드래그 금지
    centeredSlides: true,
    loop: true,
    loopedSlides: 3,
    autoHeight: true,
  });
  var thumbs01 = new Swiper('.thumbs01', {
    spaceBetween: 10,
    observer: true,
    observeParents: true,
    breakpoints: {
      1150: {
        slidesPerView: 3,
        spaceBetween: 10,
      },
      750: {
        slidesPerView: 3,
        spaceBetween: 10,
      },
      450: {
        slidesPerView: 3,
        spaceBetween: 10,
      }
    },
    loopedSlides: 3,
    loop: true,
    slideToClickedSlide: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  slider01.controller.control = thumbs01;
  thumbs01.controller.control = slider01;
</script>

원하시는 기능이 이게 맞을까요?

 



<script>
$(document).ready(function () {
    function initSwiper(tabContent) {
        var sliderContainer = tabContent.find('.slider-container');
        var thumbsContainer = tabContent.find('.thumbs-container');
        var slider = new Swiper(sliderContainer, {
            slidesPerView: 1,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            touchRatio: 0,
            centeredSlides: true,
            loop: true,
            loopedSlides: 3,
            autoHeight: true,
        });
        var thumbs = new Swiper(thumbsContainer, {
            spaceBetween: 10,
            breakpoints: {
                1150: {
                    slidesPerView: 3,
                    spaceBetween: 10,
                },
                750: {
                    slidesPerView: 3,
                    spaceBetween: 10,
                },
                450: {
                    slidesPerView: 3,
                    spaceBetween: 10,
                }
            },
            loopedSlides: 3,
            loop: true,
            slideToClickedSlide: true,
            navigation: {
                nextEl: tabContent.find('.swiper-button-next'),
                prevEl: tabContent.find('.swiper-button-prev'),
            },
        });
        slider.controller.control = thumbs;
        thumbs.controller.control = slider;
    }

    initSwiper($('#tab-1'));
    $('.tab-link').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tab-link').removeClass('current');
        $('.tab-content').removeClass('current').hide(); 
        $(this).addClass('current');
        $("#" + tab_id).addClass('current').show(); 

        var selectedTabContent = $("#" + tab_id);
        var slider = selectedTabContent.find('.slider-container').data('swiper');
        if (!slider) {
            initSwiper(selectedTabContent);
        }
    });
});
</script>
 
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 26
© SIRSOFT
현재 페이지 제일 처음으로