[jQuery] 11.실습:LGU+(swiper)

in Web on jQuery


실습: LGU+




/*----------- uplus.css -----------------*/



*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
li{
	list-style:none;
}
.header{
	position:fixed;
	width:100%;
	height:560px;
	background: url(bg_header.jpg);
}
.wrap{
	position:relative;
	width:1000px;
	margin:auto;
}

.on a{
	background: orange !important;
}
.swiper-slide img{
	width:100%;
	height:100%;
}
.nav{
	position:absolute;
	width:100%;
	z-index:333;
	display:flex;
	top:400px;
}
.nav li{
	flex:1;
	text-align:center;
	
}
.nav li a{
	display:block;
	padding:15px;
	height:60px;
	text-decoration: none;
	background: red;
	color:#fff;
}
.content2 li{
	position:absolute;
	display:none;
	top:470px;
	left:40%;
}
.swiper-container {
			width: 100%;
			margin:auto;
}
.swiper-slide {
			text-align: center;
			font-size: 18px;
			background: #fff;
			/* Center slide text vertically */
			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;
}





/*----------- uplus.js -----------------*/

$(function(){
	/* href를 가져와 구현 
		$('.nav li a').click(function(e){
		e.preventDefault();
		var href=$(this).attr('href');
		$('.content li').removeClass('on');
		$(href).addClass('on');
	})*/
	$('.content2 li:nth-child(1)').css({'display':'block'})
	var swiper = new Swiper('.swiper-container', {
		autoplay: {
			delaydelay: 2500,
			disableOnInteraction: false,
		 },
	})
	//swiper change 메서드	
	swiper.on('slideChange', function () {
		var activeIdx=swiper.activeIndex
		//alert(activeIdx)	
		$('.nav li').removeClass('on')
		$('.nav li').eq(activeIdx).addClass('on')
		$('.content2 li').css({'display':'none'})
		$('.content2 li').eq(activeIdx).css({'display':'block'})
	});
	
	// 클릭했을 때
	$('.nav li').click(function(){
		var idx=$(this).index()
		swiper.slideTo(idx,500,false) //슬라이드 움직임
		$('.nav li').removeClass('on')
		$(this).addClass('on')
		$('.content2 li').css({'display':'none'})
		$('.content2 li').eq(idx).css({'display':'block'})
	})
})





<!-------------------uplus.html------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="uplus.css">
	<link rel="stylesheet" href="swiper.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="uplus.js"></script>
	<script src="swiper.js"></script>
	<title>Uplus</title>
</head>
<body>
	
	<div class="header">
		<div class="wrap">
			<div class="swiper-container"> <!-- 박스 명은 무조건 이대로 써야함 -->
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="main1.jpg" alt=""></div>
				<div class="swiper-slide"><img src="main2.jpg" alt=""></div>
				<div class="swiper-slide"><img src="main3.jpg" alt=""></div>
				<div class="swiper-slide"><img src="main4.jpg" alt=""></div>
				<div class="swiper-slide"><img src="main5.jpg" alt=""></div>
			</div>
			
			</div>
			<ul class="nav">
				<li class="on"><a href="#con1">홈플러스 요금제</a></li>
				<li><a href="#con2">유심요금제 평생할인</a></li>
				<li><a href="#con3">유심요금제 신속할인</a></li>
				<li><a href="#con4">제휴카드 할인</a></li>
				<li><a href="#con5">고객센터앱 새단장</a></li>
			</ul>
		</div>
		<ul class="content2">
			<li id="con1"><img src="sub1.jpg" alt=""></li>
			<li id="con2"><img src="sub2.jpg" alt=""></li>
			<li id="con3"><img src="sub3.jpg" alt=""></li>
			<li id="con4"><img src="sub4.jpg" alt=""></li>
			<li id="con5"><img src="sub2.jpg" alt=""></li>
		</ul>
	</div>
	
</body>
</html>




실행결과




실습: sktelecom




/*----------- sktel.css -----------------*/



body{
	background: skyblue;
}
.swiper-container {
    width: 1000px;
	height:500px;
	background: #fff;
}

.swiper-slide {
    /* Center slide text vertically */
    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;
}
.swiper-slide img{
	width:100%;
}





/*----------- sktel.js -----------------*/

$(function(){
	var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 30,
      slidesPerGroup: 4,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
	
})





<!-------------------sktel.html------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sktelecom</title>
	<!-- Link Swiper's CSS -->
	<link rel="stylesheet" href="swiper.css">
	<link rel="stylesheet" href="sktel.css">
	<!-- Demo styles -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="swiper.js"></script>
	<script src="sktel.js"></script>
</head>
	
  
<body>
	<!-- Swiper -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="phone_img01.png" alt=""></div>
			<div class="swiper-slide"><img src="phone_img07.png" alt=""></div>
			<div class="swiper-slide"><img src="phone_img08.png" alt=""></div>
			<div class="swiper-slide"><img src="phone_img10.png" alt=""></div>
			<div class="swiper-slide"><img src="phone_img13.png" alt=""></div>
			<div class="swiper-slide"><img src="phone_img14.png" alt=""></div>
			<div class="swiper-slide"><img src="phone_img15.png" alt=""></div>
			<div class="swiper-slide"><img src="phone_img12.png" alt=""></div>
			
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
</body>
</html>




실행결과




실습: fursys




/*----------- fursys.css -----------------*/



*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html, body {
    position: relative;
    height: 100%;
}
body {
    background: #ddd;
    margin: 0;
    padding: 0;
}
.wrap{
	position: relative;
	width: 750px;
    height: 600px;
	margin:auto;
}
.swiper-container {
	background: #fff;
    width:100%;
	height:100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    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;
}
.swiper-slide:nth-child(1){
	background: url(main1.png) no-repeat; 
}
.swiper-slide:nth-child(2){
	background: url(main2.png) no-repeat; 
}
.swiper-slide:nth-child(3){
	background: url(main3.png) no-repeat;
}
.swiper-slide:nth-child(4){
	background: url(main4.png) no-repeat;
}
.swiper-slide:nth-child(5){
	background: url(main5.png) no-repeat;
}
.swiper-slide:nth-child(6){
	background: url(main6.png) no-repeat;
}
.nav{
	position:absolute;
	left:-50px;
	top:0;
	z-index:333;
}
.nav li{
	list-style:none;
}
.nav li a{
	width:50px;
	height:50px;
	display:block;
}
.nav li:nth-child(1) a{
	background: url(nav1_on.jpg);
}
.nav li:nth-child(1):hover a{
	background: url(nav1_off.jpg);
}
.nav li:nth-child(1).on a{
	background: url(nav1_off.jpg);
}

.nav li:nth-child(2) a{
	background: url(nav2_on.jpg);
}
.nav li:nth-child(2):hover a{
	background: url(nav2_off.jpg);
}
.nav li:nth-child(2).on a{
	background: url(nav2_off.jpg);
}

.nav li:nth-child(3) a{
	background: url(nav3_on.jpg);
}
.nav li:nth-child(3):hover a{
	background: url(nav3_off.jpg);
}
.nav li:nth-child(3).on a{
	background: url(nav3_off.jpg);
}

.nav li:nth-child(4) a{
	background: url(nav4_on.jpg);
}
.nav li:nth-child(4):hover a{
	background: url(nav4_off.jpg);
}
.nav li:nth-child(4).on a{
	background: url(nav4_off.jpg);
}

.nav li:nth-child(5) a{
	background: url(nav5_on.jpg);
}
.nav li:nth-child(5):hover a{
	background: url(nav5_off.jpg);
}
.nav li:nth-child(5).on a{
	background: url(nav5_off.jpg);
}

.nav li:nth-child(6) a{
	background: url(nav6_on.jpg);
}
.nav li:nth-child(6):hover a{
	background: url(nav6_off.jpg);
}
.nav li:nth-child(6).on a{
	background: url(nav6_off.jpg);
}





/*----------- fursys.js -----------------*/

$(function(){
	var swiper = new Swiper('.swiper-container', {
		direction: 'vertical',
		mousewheel: true,
		autoplay: {
			delaydelay: 2500,
			disableOnInteraction: false,
		},
    });
	
	//swiper change 메서드
	swiper.on('slideChange', function () {
		var activeIdx=swiper.activeIndex
		//alert(activeIdx)	
		$('.nav li').removeClass('on')
		$('.nav li').eq(activeIdx).addClass('on')
	});
	
	$('.nav li').mouseenter(function(){
		var idx=$(this).index()
		swiper.slideTo(idx,500,false) //슬라이드 움직임
		$('.nav li').removeClass('on')
		$(this).addClass('on')
	})
})





<!-------------------fursys.html------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- Link Swiper's CSS -->
	<link rel="stylesheet" href="swiper.css">
	<link rel="stylesheet" href="fursys.css">
	<!-- Demo styles -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="swiper.js"></script>
	<script src="fursys.js"></script>
</head>
<body>
<div class="wrap">
	 <!-- Swiper -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"></div>
			<div class="swiper-slide"></div>
			<div class="swiper-slide"></div>
			<div class="swiper-slide"></div>
			<div class="swiper-slide"></div>
			<div class="swiper-slide"></div>
			
		</div>
    </div>
	<ul class="nav">
		<li class="on"><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
	</ul>
</div>
</body>

</html>




실행결과