swiper 슬라이드 탭안에서 기능이 안먹혀요..
본문
안녕하세요..
이틀동안 해결이 안되서 온 초보 퍼블리셔입니다..ㅠㅠ
각 슬라이드를 탭안에 넣었는데
첫번째 탭만 작동하고 두번째부터는 swiper 기능이 안먹힙니다 ㅠ.
display:none; 때문이라고 하는데,
탭을 눌렀을때 swiper reload 하는방법이 있을까요..
opacity로 해봐도 해결이 안되고, 너무 답답해요 ㅠㅠ
** 스와이퍼 사용 함
<script>
function touchSlide(){
$('.swiper2').each(function(){
var swiper2 = new Swiper('.swiper2', {
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
},
});
});
};
</script>
** 탭메뉴 사용함
$(function(){ // jQuery 준비
$('ul.tab > li').eq(0).addClass('selected');
$('.tab_box > div').hide();
$('.tab_box > div').eq(0).show();
$('ul.tab > li').click(function(){
$('ul.tab > li').removeClass('selected');
$(this).addClass('selected');
$('.tab_box > div').hide();
$('.tab_box > div').eq($(this).index()).show();
touchSlide.reload(); //탭버튼 누를때마다 슬라이드 함수 다시 호출
return false;
});
}); //jQuery 종료
답변 1
두번째 탭은 display:none 이 되기 때문에,
슬라이더가 width 값을 0 으로 인식해서 그런 증상이 나타나구요.
해결방법은 width 값을 강제로 줘서 먹게하거나,
아래와 같이 swiper 옵션을 줘서 해결해야합니다.
observer: true,
observeParents: true,
이 두가지 옵션을 적어주면 해결됩니다.
slick 의 경우는 variableWidth: true; 로 해결해야합니다.
<script>
var swiper = new Swiper('.swiper-container', {
initialSlide : 0,
slidesPerView: 'auto',
observer: true,
observeParents: true,
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
헉...............................................대박..................................ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
진짜 너무너무 감사합니다 ㅠㅠㅠ
observer: true,
observeParents: true,
혹시 이게 어떤 기능으로 작용해서 되는건지 여쭤봐도 될까요?ㅠㅠ
진짜 넘넘 감사합니다 ㅠㅠㅠ
저도 퍼블리싱 초창기시절 늘 애타던 작업이었답니다 ㅋㅋ
그래서 정말 어떤 맘인지 공감이 많이 갔어요 ^^
swiper 공홈가면 API 에서 observer 라는 항목을 보실 수 있으실텐데요.
간략하게만 설명드리자면, 저 옵션을 true 로 설정할 경우 슬라이더가 불러올때마다 새로고침되는 역할입니다. 그래서 탭전환시에도 새로고침으로 인식해서 제대로 로딩이 된답니다. 꼼수라면 꼼수이고, 옵션을 제대로 이해하고 활용하는 지혜이기도 하네요 ㅋㅋ 구글링 더 해보시면 탭전환 방식인데, swiper 를 init 시켜서 하는 방법도 있답니다~~ 근데 그건 너무 복잡시려서 ㅠㅠ 저 옵션이 젤 쉬웠어요!
진짜 천재신것같아요.. 이 글은 다른분들도 많이 와서 도움받고 가게될 글이 될 것 같아요. 아무리 검색하고 뒤져도 해결법을 못찾았었거든요.. 넘넘 감사해요.. 정말로요.. 복받으세요!
귀한 답글 보고갑니다.
저거 jquery 충돌나는 전형적인 상황인데 no conflict 이거 저는 될때가 거의 없더라구요.
자바스크립트 잘하시는 분들은 잘하시겠지만 보통 해결이안되는데 이거 너무 좋네요
#swiper #충돌 #jquery
저.. 감사인사드릴라고 ㅠ회원가입까지했네요 ㅠㅠ 흑흑 저도 글쓴분처럼 같은 현상으로 겁나 고민하고 힘들었는데 ㅠㅠ 사막에서 오아시스 발견한 기분..bb 복많이 받으세요
감사합니다...ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
천사 ..입니다 ... 다음생에도 개발자로 태어나주세요 ...
ㅠㅠㅠ 와 ㅠㅠ 넘나 감사합니다 진짜 천재 저도 이거때문에 로그인하고 갑니다 ㅠㅠㅠㅠㅠ 정말정말 감사해용 ㅠ
