<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%;}
body{overflow:hidden;}
.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;
			}
		}
	}
});

External CSS

  1. https://static12.samsungcard.com/css/directinsurance/common.css
  2. https://static12.samsungcard.com/css/directinsurance/main.css
  3. https://static12.samsungcard.com/css/directinsurance/scroll.css
  4. https://static12.samsungcard.com/css/directinsurance/calendar.css
  5. https://static12.samsungcard.com/css/directinsurance/selectric.css
  6. https://static12.samsungcard.com/css/directinsurance/main_visual.css
  7. https://static12.samsungcard.com/css/directinsurance/login_layer.css
  8. https://static12.samsungcard.com/css/directinsurance/common_new.css

External JavaScript

  1. https://static12.samsungcard.com/js/insurance/libs/jquery-1.11.2.min.js
  2. https://static12.samsungcard.com/js/directinsurance/swiper-4.3.3.min.js