안녕하세요! 탭 안에 파라미터 작동이 안되어 문의 남깁니다!
본문
안녕하세요, 왕초보 퍼블리셔입니다.. 구글링 하다가 도저히 답을 찾지 못하겠어 글 올립니다!
우선 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로 두개다 바꿔보세용
으악 위에 오타 입니다!! ㅠㅠ 두번째 스와이퍼 클래스
slider02
thumbs02
로 되어있는데도 오류가 나서요 ..!
스와이프 초기화 함수가 없는 것 같습니다. 다음과 같이 해 볼 수 있을 것 같습니다.
<!-- 탭 -->
<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>
버튼에 클래스 주니 해결되었습니다 ㅠㅠㅠ 정성스런 답변 감사합니다 ..!
답변을 작성하시기 전에 로그인 해주세요.
