swiper , tap

[상황]

탭이 4개 있고 

1번 탭에 swiper를 사용해서 보여줄 이미지 2개

2번 탭에 swiper를 사용해서 보여줄 이미지 2개

3번 탭에 swiper를 사용해서 보여줄 이미지 2개

4번 탭에 swiper를 사용해서 보여줄 이미지 4개

- 각 슬라이드 영역은 < > 좌우 이동 버튼있음

- 하단 페이지네이션 버튼 있음

- 오토플레이+loop

 

문제점1) 이미지 슬라이드 영역을 style:block; style:none;으로 탭에 따라 css설정을 바꾸면

간헐적으로 슬라이드의 < > (좌우버튼)이 누리긴 하나 작동을 하지 않는 문제 있음

- 하단 페이지네이션 버튼을 누르거나 이미지 자체를 좌우로 한번 움직여 주면 버튼이 정상 작동하였음.

 

문제점1- 해결)

swiper 생성 스트립트를 처음 페이지 불러올 때 한번 호출하였는데

탭을 누를 때마다 스트립트를 호출하는 방식으로 변경함.

<> 버튼 정상 작동

 

문제점2) 

swiper스트립트를 탭을 이동할 때마다 호출 했는데

또 생긴 문제가  오토플레이이고 이미지가 한장이 아닐 경우  휘리릭 넘어감.

 

문제점2-해결1 : 다음 날 보니까 같은 증상 생김..

loopedSlides : 8

한번에 loop될 복제 이미지의 수를 8개로 아예 늘려버림.

 

문제점2-해결2 

swiper1.destroy(true,true);

탭 이동 시 swiper가 null이 아니면 지움..

일단.. 문제는 없어보이는데.. 오픈 소스 쓰지말고 기능 만들어야 할듯..

 

 

---

 

<!-- 탭 영역 시작 -->
<div>
	<ul class="tabs">
		<li class="tab-link" data-tab="tab-1"><img id="img_tab1" src="/tap1_on.png"></li>
		<li class="tab-link" data-tab="tab-2"><img id="img_tab2" src="/tap2_off.png"></li>
		<li class="tab-link" data-tab="tab-3"><img id="img_tab3" src="/tap3_off.png"></li>
		<li class="tab-link" data-tab="tab-4"><img id="img_tab4" src="/tap4_off.png"></li>
	</ul>
</div>
<!-- 탭 영역 종료 -->
<!-- 탭1의 슬라이드 영역 시작  -->
<div id="tab-1" class="tab-content">
	<div class="slideshow-container">
		<div class="wiper-container swiper1"> 
			<div class="swiper-wrapper" style="transition-timing-function: linear;> <!-- style="transition-timing-function: linear; 속도가 빨라져서 추가해봄 -->
				<div class="swiper-slide">
					<img src="/tap1_slide1.jpg"> <!-- 이미지가 가운데로 안온다면 여기에서 직접 설정 -->
				</div>
				
				<div class="swiper-slide">
					<img src="/tap1_slide2.jpg"> <!-- 이미지가 가운데로 안온다면 여기에서 직접 설정 -->
				</div>
					
				<div class="사용할 class명" id="prev1"> <img src="/prev.png"> </div>
			 	<div class="사용할 class명" id="next1"> <img src="/next.png"> </div> 
			 	
				<div class="swiper-pagination1" id="swiper-pagination1"></div> 			
			</div> <!-- swiper-wrapper 종료 --> 	
		</div> <!-- wiper-container 종료 --> 
	</div> <!-- slideshow-container 종료 -->
 </div> <!-- tab-1 종료-->
<!-- 탭1의 슬라이드 영역 종료 --> 
<div id="tab-2" class="tab-content"> ... </div>
<div id="tab-3" class="tab-content"> ... </div>
<div id="tab-4" class="tab-content"> ... </div>

var swiper1=null,swiper2=null,swiper3=null,swiper4=null; // 문제점2 해결 코드 추가


$(document).ready(function(){
	
	//페이지 진입 시 1번 탭 보여주기 위해 실행
	$("#tab-1").addClass('current');
	fn_swiper1();
	 
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');
		var currentTab = tab_id.slice(-1);
		
		for(var i=1; i < 5 ; i++){
			if(currentTab == i){ //현재 선택한 탭
				
				switch(currentTab){
				//case "1" : fn_swiper1(); break; 
				//case "2" : fn_swiper2(); break;
				//case "3" : fn_swiper3(); break;
				//case "4" : fn_swiper4(); break;
                case "1" : fn_nullcheck(1); fn_swiper1(); break; 
				case "2" : fn_nullcheck(2); fn_swiper2(); break;
				case "3" : fn_nullcheck(3); fn_swiper3(); break;
				case "4" : fn_nullcheck(4); fn_swiper4(); break;
				}
				
				$("#img_tab"+i).attr("src","/tap"+i+"_on.gif");
				$("#tab-"+currentTab).addClass('current');
				
			}
			if(currentTab != i){ // 선택되지 않은 그 외의 탭
				$("#img_tab"+i).attr("src","/tap"+i+"_off.gif");
				$("#tab-"+i).removeClass('current');
			}
		}
	})
		
})

function fn_nullcheck(swiperNum){ // 문제점2 해결 코드 추가
	if(swiperNum == 1){
    	if(swiper1 != null){
        	swiper1.destroy(true,true);
        }
    }
    if(swiperNum == 2){
    	if(swiper2 != null){
        	swiper2.destroy(true,true);
        }
    }
    if(swiperNum == 3){
    	if(swiper3 != null){
        	swiper3.destroy(true,true);
        }
    }
    if(swiperNum == 4){
    	if(swiper4 != null){
        	swiper4.destroy(true,true);
        }
    }
}

function fn_swiper1(){...}
function fn_swiper2(){...}
function fn_swiper3(){...}
function fn_swiper4(){
   var swiper4 =  new Swiper('.swiper4', {
		loop: true,
		loopedSlides : 8,//슬라이드 휘리릭 방지
		navigation: {
		nextEl: '#next4',
		prevEl: '#prev4',
		},
		observer : true, //탭 이동 시 마다 인식 시키기 위해 추가했는데 있으나 없으나 뭐 '-'
		observeParents : true, //탭 이동 시 마다 인식 시키기 위해 추가했는데 있으나 없으나 뭐 '-'
		//observeSlideChildren : true, //탭 이동 시 마다 인식 시키기 위해 추가했는데 있으나 없으나 뭐 '-'
		spaceBetween: 30,
		centeredSlides: true,
		autoplay: {
		 delay: 7000,
		 disableOnInteraction: false,
		},
		 pagination: {
			el :'.swiper-pagination4',
			clickable : true,
			renderBullet: function (index, className) {
				return '<span class="'+className+'" id="dot'+index+'"></span>';
			   },
			},
	  });
}