본문 바로가기

WEB/내맘대로 코딩

swiperjs - 앙케이트 설문지

특정한 조건을 만족시켜야 넘어가는 로직구현 (슬라이드중 가장 많이 사용하는 swiperjs 사용)

어떤 함수(옵션)를 써야하는지 몰라서 미친듯이 구글링하다가.. 마침내 찾았다.

allowSlideNext, allowSlidePrev 값만 넘기면 된다는 것을..

swiper-wrapper 클래스에 disabled을 추가해서 transform: translate3d(0,0,0) !important로 선언해야한다든지.......

no-swiping 혹은 onlyExternal 혹은 touchRatio:0 옵션들을 주면 된다든지.....

모바일 화면 터치로 드래그 안되게 막으라는 얼빵한 답변도 있었으나...

모두 헛소리였음을 알게 되었다.

5년전 메르스 터졌을때, 양재동 삼성병원에서 하이브리드앱 구축을 했었는데 그때도 유사한 로직을 본 기억이 있다.

슬라이드마다 들어간 버튼들 제어한다고 id 다 박고 정말 ugly하게 코딩했던 기억이 난다. 그땐 정말 애송이였던듯ㅎ

 

<div class="survey swiper-container">
<ul class="swiper-wrapper">
	<li class="swiper-slide">
		<img src="https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/e35/c0.62.500.500a/s480x480/57442730_365877550695581_3415344608789140255_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=105&_nc_ohc=0JjZDxwgOXUAX-_RuFR&oh=0e329bf77197e1774d893d3037a0b1b1&oe=5EBDE7E5" alt="" class="img">
		<div class="quest">
			<p>첸샤오의 시선은 어디에 머무르고 있나요?</p>
			<div class="form__terms-column form__terms-column--1"> 									
				<div class="form__checkbox form__checkbox--l"> 										
					<input type="radio" id="ex1" name="ra1">
					<label for="ex1">화병</label> 	
					<input type="radio" id="ex2" name="ra1">
					<label for="ex2">날보고 있다</label> 									
				</div>
			</div>
			<button type="button" class="btn_next">다음</button>
		</div>
	</li>
	<li class="swiper-slide">
		<img src="https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/e35/53884416_128382264952636_1489322973303790444_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=dSn40Ro3nz4AX9tN_ZP&oh=c1f612fb1be00f0fbb9472ae05aae1cf&oe=5EBF4C8A" alt="" class="img">
		<div class="quest">
			<p>첸샤오의 패션은 어떤가요?</p>
			<div class="form__terms-column form__terms-column--1"> 									
				<div class="form__checkbox form__checkbox--l"> 										
					<input type="radio" id="ex3" name="ra3">
					<label for="ex3">섹시하다</label> 	
					<input type="radio" id="ex4" name="ra3">
					<label for="ex4">별로다</label> 
					<input type="radio" id="ex5" name="ra3">
					<label for="ex5">내 맘에 든다</label> 									
				</div>
			</div>
			<button type="button" class="btn_next">다음</button>
		</div>
	</li>
	<li class="swiper-slide">
		<img src="https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/e35/35272884_182016102483516_7073837486136360960_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=100&_nc_ohc=cWe0qyFEUlMAX91XsaO&oh=4afc8f36a1c43d881d7b438e2463bdb9&oe=5EBF8738" alt="" class="img">
		<div class="quest">
			<p>첸샤오에게 축구공 모자가 어울리나요?</p>
			<div class="form__terms-column form__terms-column--1"> 									
				<div class="form__checkbox form__checkbox--l"> 										
					<input type="radio" id="ex6" name="ra6">
					<label for="ex6">어울린다</label> 	
					<input type="radio" id="ex7" name="ra6">
					<label for="ex7">이상하다</label> 
					<input type="radio" id="ex8" name="ra6">
					<label for="ex8">축구공이 되고 싶다</label> 									
				</div>
			</div>
			<button type="button" class="btn_next">다음</button>
		</div>
	</li>
	<li class="swiper-slide">
		<img src="https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s750x750/22344845_2030949100475138_4462071433966649344_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=102&_nc_ohc=KupF3PsP3lsAX9PlQ_J&oh=afaa172abac96ebbf5dd2325b3f681be&oe=5EBFF3D1" alt="" class="img">
		<div class="quest">
			<p>첸샤오는 무슨 생각을 하고있나요?</p>
			<div class="form__terms-column form__terms-column--1"> 									
				<div class="form__checkbox form__checkbox--l"> 										
					<input type="radio" id="ex9" name="ra9">
					<label for="ex9">내 생각</label> 	
					<input type="radio" id="ex10" name="ra9">
					<label for="ex10">무념무상</label> 								
				</div>
			</div>
			<button type="button" class="btn_next">다음</button>
		</div>
	</li>
	<li class="swiper-slide">
		<div class="quest">
			<p class="txt_end">수고 하셨습니다~ㅋㅋ</p>
		</div>
	</li>
</ul>
</div>

 

html, body {position: relative;height: 100%;}
.swiper-container {width: 100%;height: 100%;}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.survey.swiper-container {padding: 0;border: 0;}
.survey .quest {margin:0 10px; text-align: left;}
.survey .quest input {position: absolute;left: 0;right: 0;top: 0;bottom: 0;opacity: 0;z-index: -1;width: 100%;}
.survey .form__terms-column {margin: 10px 0;}
.survey .swiper-slide .img {width:300px;height:auto;max-width: 100%;}
.survey .txt_end {font-size: 40px;}
.survey .btn_next {display:block;width:100%;background:steelblue;font-size:18px;color:#fff;padding:8px 10px 10px;border-radius:10px;}
.survey .btn_next.active{background:crimson;}
@media screen and (max-width: 1199px) and (min-width: 768px) {
	.survey input[type='radio']+label:before {
		margin-top: -9px;
	}
}
@media all and (max-width:767px){
	.survey .swiper-slide {flex-direction: column}
	.survey .swiper-slide .img {display: block;}
	.survey .quest {display: block;margin-top: 10px;}
	.survey .form__terms-column {margin: 10px 0 0;}
	.survey input[type='radio']+label{
		margin-bottom: 10px;
	}
	.survey input[type='radio']+label:before {
		top: 2px;
	}
}
var survey = new Swiper('.survey', {
	direction: 'vertical',
	on: {
		init: function(){
			var that = this;			
			console.log(that);
			console.log( this.activeIndex );
			that.allowSlidePrev = false;
			that.allowSlideNext = false;

			switch( this.activeIndex ){
				case 0:
				$('input[name=ra1]').each(function(){
					var radio = $(this);
					radio.bind('click', function(){
						//console.log( $(this).attr('id') );
						if( $(this).attr('id') == 'ex2' ){
							//that.allowSlidePrev = false;
							//that.allowSlideNext = true;
							//that.slideTo(1);							
							
							$(that.slides[parseInt(that.activeIndex,10)]).find('.btn_next').addClass('active');
						}else{
							//return;
							$(that.slides[parseInt(that.activeIndex,10)]).find('.btn_next').removeClass('active');
						}
					});
				});
				break;
			}			
			$(that.slides[this.activeIndex]).find('.btn_next').bind('click', function(){
				if( $(this).hasClass('active') ){
					that.allowSlideNext = true;
					that.slideTo(1);
				}else{
					alert('장난하니?');
				}
			});
		},
		slideChange: function(){
			var that = this;
			that.allowSlidePrev = false;
			that.allowSlideNext = false;
			//console.log( this.activeIndex );
			switch( this.activeIndex ){
				case 1:
				$('input[name=ra3]').each(function(){
					var radio = $(this);
					radio.bind('click', function(){
						if( $(this).attr('id') == 'ex5' ){
							//that.allowSlidePrev = false;
							//that.allowSlideNext = true;
							//that.slideTo(2);
							
							$(that.slides[parseInt(that.activeIndex,10)]).find('.btn_next').addClass('active');
						}else{
							//return;
							$(that.slides[parseInt(that.activeIndex,10)]).find('.btn_next').removeClass('active');
						}
					});
				});
				$(that.slides[this.activeIndex]).find('.btn_next').bind('click', function(){
					if( $(this).hasClass('active') ){
						that.allowSlideNext = true;
						that.slideTo(2);
					}else{
						alert('장난하니?');
					}
				});
				break;

				case 2:
				$('input[name=ra6]').each(function(){
					var radio = $(this);
					radio.bind('click', function(){
						if( $(this).attr('id') == 'ex8' ){
							//that.allowSlidePrev = false;
							//that.allowSlideNext = true;
							//that.slideTo(3);

							$(that.slides[parseInt(that.activeIndex,10)]).find('.btn_next').addClass('active');
						}else{
							//return;
							$(that.slides[parseInt(that.activeIndex,10)]).find('.btn_next').removeClass('active');
						}
					});
				});
				$(that.slides[this.activeIndex]).find('.btn_next').bind('click', function(){
					if( $(this).hasClass('active') ){
						that.allowSlideNext = true;
						that.slideTo(3);
					}else{
						alert('장난하니?');
					}
				});
				break;

				case 3:
				$('input[name=ra9]').each(function(){
					var radio = $(this);
					radio.bind('click', function(){
						if( $(this).attr('id') == 'ex9' ){
							//that.allowSlidePrev = false;
							//that.allowSlideNext = true;
							//that.slideTo(4);
							//
							$(that.slides[parseInt(that.activeIndex,10)]).find('.btn_next').addClass('active');
						}else{
							//return;
							$(that.slides[parseInt(that.activeIndex,10)]).find('.btn_next').removeClass('active');
						}
					});
				});
				$(that.slides[this.activeIndex]).find('.btn_next').bind('click', function(){
					if( $(this).hasClass('active') ){
						that.allowSlideNext = true;
						that.slideTo(3);
					}else{
						alert('장난하니?');
					}
				});
				$(that.slides[this.activeIndex]).find('.btn_next').bind('click', function(){
					if( $(this).hasClass('active') ){
						that.allowSlideNext = true;
						that.slideTo(4);
					}else{
						alert('장난하니?');
					}
				});
				break;

				case 4:
				that.allowSlideNext = true;
				break;
			}
		}
	}
});

'WEB > 내맘대로 코딩' 카테고리의 다른 글

css3 효과주기  (0) 2020.04.16
틀린그림찾기  (0) 2020.04.15
swiperjs - 앙케이트 설문지  (0) 2020.04.14
전체 체크박스  (0) 2019.08.21
튤팁 tooltip  (0) 2019.08.05
풍선말 (함수형 vs 프로토타입형 코드 비교)  (0) 2019.08.04