안녕하세요! 탭 안에 파라미터 작동이 안되어 문의 남깁니다! 채택완료
안녕하세요, 왕초보 퍼블리셔입니다.. 구글링 하다가 도저히 답을 찾지 못하겠어 글 올립니다!
우선 html 입니다
Copy
product01
product02
product03
product name
txt
product name
txt
그리고 js 코드 입니다.
Copy
$('.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');
});
$('.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();
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;
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;
tab 안에 스와이퍼 작동시키는 방법으로, observer: true 와 observeParents: true 두 가지 코드를 입력하면 된다고 하여서 입력하였는데, 처음에는 두 탭 다 작동이 되었다가 다시 처음 탭으로 돌아가면 스와이퍼 작동이 안됩니다 ㅠㅠ
도움 주실 분 계실까요....
답변 3개
채택된 답변
+20 포인트
2년 전
slider01
thumbs01
밖에없네용
밑에 스와이퍼2개도
01로되어있어여 02로 두개다 바꿔보세용
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
leekeep
2년 전
댓글을 작성하려면 로그인이 필요합니다.
디지털홍익인간
2년 전
원하시는 기능이 이게 맞을까요?
Copy
$(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);
}
});
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
2년 전
스와이프 초기화 함수가 없는 것 같습니다. 다음과 같이 해 볼 수 있을 것 같습니다.
Copy
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(); // 초기 탭 선택
});
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;
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
slider02
thumbs02
로 되어있는데도 오류가 나서요 ..!