안녕하세요! 탭 안에 파라미터 작동이 안되어 문의 남깁니다! 채택완료
leekeep
2년 전
조회 1,955
안녕하세요, 왕초보 퍼블리셔입니다.. 구글링 하다가 도저히 답을 찾지 못하겠어 글 올립니다!
우선 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"></p>
<p> <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></p>
<p> <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></p>
<p> </div></p>
<p> </p>
<p> </p>
<p> <div id="tab-2" class="tab-content current"></p>
<p> <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></p>
<p> <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></p>
<p> </div></p>
<p> </p>
<p>
그리고 js 코드 입니다.
</p>
<p><!--탭--></p>
<p><script>
$('.tab-link').click(function () {
var tab_id = $(this).attr('data-tab');</p>
<p> $('.tab-link').removeClass('current');
$('.tab-content').removeClass('current');</p>
<p> $(this).addClass('current');
$("#" + tab_id).addClass('current');</p>
<p>});
</script></p>
<p> </p>
<p><!--탭 부드럽게-->
<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></p>
<p> </p>
<p><!-- 프로덕트 스와이퍼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,
});</p>
<p>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',
},</p>
<p>});</p>
<p>
slider01.controller.control = thumbs01;
thumbs01.controller.control = slider01;
</script></p>
<p><!-- 프로덕트 스와이퍼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,
});</p>
<p>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',
},</p>
<p>});</p>
<p>
slider02.controller.control = thumbs02;
thumbs02.controller.control = slider02;
</script></p>
<p>
tab 안에 스와이퍼 작동시키는 방법으로, observer: true 와 observeParents: true 두 가지 코드를 입력하면 된다고 하여서 입력하였는데, 처음에는 두 탭 다 작동이 되었다가 다시 처음 탭으로 돌아가면 스와이퍼 작동이 안됩니다 ㅠㅠ
도움 주실 분 계실까요....
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
l
leekeep
2년 전
댓글을 작성하려면 로그인이 필요합니다.
2년 전
원하시는 기능이 이게 맞을까요?
</p>
<p>
<script>
$(document).ready(function () {
function initSwiper(tabContent) {
var sliderContainer = tabContent.find('.slider-container');
var thumbsContainer = tabContent.find('.thumbs-container');</p>
<p> var slider = new Swiper(sliderContainer, {
slidesPerView: 1,
effect: 'fade',
fadeEffect: {
crossFade: true
},
touchRatio: 0,
centeredSlides: true,
loop: true,
loopedSlides: 3,
autoHeight: true,
});</p>
<p> 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'),
},
});</p>
<p> slider.controller.control = thumbs;
thumbs.controller.control = slider;
}</p>
<p>
initSwiper($('#tab-1'));</p>
<p> $('.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(); </p>
<p>
var selectedTabContent = $("#" + tab_id);
var slider = selectedTabContent.find('.slider-container').data('swiper');
if (!slider) {
initSwiper(selectedTabContent);
}
});
});
</script>
</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
l
leekeep
2년 전
버튼에 클래스 주니 해결되었습니다 ㅠㅠㅠ 정성스런 답변 감사합니다 ..!
댓글을 작성하려면 로그인이 필요합니다.
2년 전
스와이프 초기화 함수가 없는 것 같습니다. 다음과 같이 해 볼 수 있을 것 같습니다.
</p>
<p><!-- 탭 -->
<script>
function initializeSwiper(swiperContainer) {
var slider = new Swiper(swiperContainer + ' .slider01', {
// 스와이퍼 설정들...
});
var thumbs = new Swiper(swiperContainer + ' .thumbs01', {
// 스와이퍼 설정들...
});</p>
<p> slider.controller.control = thumbs;
thumbs.controller.control = slider;
}</p>
<p> $(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');</p>
<p> // 탭 변경 시 스와이퍼 초기화 함수 호출
var tabId = $(this).attr('data-tab');
initializeSwiper("#" + tabId);</p>
<p> e.preventDefault();
}).filter(':eq(0)').click(); // 초기 탭 선택
});
</script></p>
<p><!-- 프로덕트 스와이퍼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',
},
});</p>
<p> slider01.controller.control = thumbs01;
thumbs01.controller.control = slider01;
</script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
l
leekeep
2년 전
헉 버튼에 클래스 주니까 되네요.. ! 정성스런 답변 감사합니다!!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
slider02
thumbs02
로 되어있는데도 오류가 나서요 ..!