swiper 슬라이드 탭안에서 기능이 안먹혀요.. 채택완료
리미리미
5년 전
조회 15,518
안녕하세요..
이틀동안 해결이 안되서 온 초보 퍼블리셔입니다..ㅠㅠ
각 슬라이드를 탭안에 넣었는데
첫번째 탭만 작동하고 두번째부터는 swiper 기능이 안먹힙니다 ㅠ.
display:none; 때문이라고 하는데,
탭을 눌렀을때 swiper reload 하는방법이 있을까요..
opacity로 해봐도 해결이 안되고, 너무 답답해요 ㅠㅠ
** 스와이퍼 사용 함
</p>
<p><script>
function touchSlide(){
$('.swiper2').each(function(){
var swiper2 = new Swiper('.swiper2', {
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
},
});
});
};
</script></p>
<p>
** 탭메뉴 사용함
</p>
<p> $(function(){ // jQuery 준비</p>
<p> $('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 종료</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
5년 전
두번째 탭은 display:none 이 되기 때문에,
슬라이더가 width 값을 0 으로 인식해서 그런 증상이 나타나구요.
해결방법은 width 값을 강제로 줘서 먹게하거나,
아래와 같이 swiper 옵션을 줘서 해결해야합니다.
observer: true, observeParents: true,
이 두가지 옵션을 적어주면 해결됩니다.
slick 의 경우는 variableWidth: true; 로 해결해야합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 8개
�
리미리미
5년 전
D
DSLOVE
5년 전
저도 퍼블리싱 초창기시절 늘 애타던 작업이었답니다 ㅋㅋ
그래서 정말 어떤 맘인지 공감이 많이 갔어요 ^^
swiper 공홈가면 API 에서 observer 라는 항목을 보실 수 있으실텐데요.
간략하게만 설명드리자면, 저 옵션을 true 로 설정할 경우 슬라이더가 불러올때마다 새로고침되는 역할입니다. 그래서 탭전환시에도 새로고침으로 인식해서 제대로 로딩이 된답니다. 꼼수라면 꼼수이고, 옵션을 제대로 이해하고 활용하는 지혜이기도 하네요 ㅋㅋ 구글링 더 해보시면 탭전환 방식인데, swiper 를 init 시켜서 하는 방법도 있답니다~~ 근데 그건 너무 복잡시려서 ㅠㅠ 저 옵션이 젤 쉬웠어요!
그래서 정말 어떤 맘인지 공감이 많이 갔어요 ^^
swiper 공홈가면 API 에서 observer 라는 항목을 보실 수 있으실텐데요.
간략하게만 설명드리자면, 저 옵션을 true 로 설정할 경우 슬라이더가 불러올때마다 새로고침되는 역할입니다. 그래서 탭전환시에도 새로고침으로 인식해서 제대로 로딩이 된답니다. 꼼수라면 꼼수이고, 옵션을 제대로 이해하고 활용하는 지혜이기도 하네요 ㅋㅋ 구글링 더 해보시면 탭전환 방식인데, swiper 를 init 시켜서 하는 방법도 있답니다~~ 근데 그건 너무 복잡시려서 ㅠㅠ 저 옵션이 젤 쉬웠어요!
�
리미리미
5년 전
진짜 천재신것같아요.. 이 글은 다른분들도 많이 와서 도움받고 가게될 글이 될 것 같아요. 아무리 검색하고 뒤져도 해결법을 못찾았었거든요.. 넘넘 감사해요.. 정말로요.. 복받으세요!
f
freed
5년 전
귀한 답글 보고갑니다.
저거 jquery 충돌나는 전형적인 상황인데 no conflict 이거 저는 될때가 거의 없더라구요.
자바스크립트 잘하시는 분들은 잘하시겠지만 보통 해결이안되는데 이거 너무 좋네요
#swiper #충돌 #jquery
저거 jquery 충돌나는 전형적인 상황인데 no conflict 이거 저는 될때가 거의 없더라구요.
자바스크립트 잘하시는 분들은 잘하시겠지만 보통 해결이안되는데 이거 너무 좋네요
#swiper #충돌 #jquery
�
지니짜응
4년 전
저.. 감사인사드릴라고 ㅠ회원가입까지했네요 ㅠㅠ 흑흑 저도 글쓴분처럼 같은 현상으로 겁나 고민하고 힘들었는데 ㅠㅠ 사막에서 오아시스 발견한 기분..bb 복많이 받으세요
�
ㄱ소진
4년 전
감사합니다...ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
B
ByKy
3년 전
천사 ..입니다 ... 다음생에도 개발자로 태어나주세요 ...
�
야호123
1년 전
ㅠㅠㅠ 와 ㅠㅠ 넘나 감사합니다 진짜 천재 저도 이거때문에 로그인하고 갑니다 ㅠㅠㅠㅠㅠ 정말정말 감사해용 ㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
진짜 너무너무 감사합니다 ㅠㅠㅠ
observer: true,
observeParents: true,
혹시 이게 어떤 기능으로 작용해서 되는건지 여쭤봐도 될까요?ㅠㅠ
진짜 넘넘 감사합니다 ㅠㅠㅠ