[jQuery] 10.swiper

in Web on jQuery


swiper




인터넷에서 슬라이드 많이 보셨죠?

슬라이드도 자바스크립트로 구현되어 있어서 손쉽게 가져와 구현할 수 있습니다.

먼저 다음 사이트 idangero.us에서 swiper.css와 swiper.js 파일을 받아야합니다. 


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="swiper.css">
	<style>
		body {
			background: #eee;
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			font-size: 14px;
			color:#000;
			margin: 0;
			padding: 0;
		}
		.swiper-container {
			width: 500px;
			height: 300px;
			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;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="swiper.js"></script>
	<script>
		$(function(){
			var swiper = new Swiper('.swiper-container', {
				effect: 'fade', /* fade 효과 */
				navigation: { /* 슬라이드 이동시키는 화살표 */
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				pagination: { /* 슬라이드 밑에 동그라미 */
					el: '.swiper-pagination',
					clickable: true, /* 클릭했을 때 해당 위치로 슬라이동 이동 */
				},
				autoplay: { /* 자동 실행 */
					delay: 2500,
					disableOnInteraction: false,
				}
			});
		}) //function
	</script>
	<title>swiper</title>
	
</head>
<body>
	<div class="swiper-container"> <!-- 박스 명은 무조건 이대로 써야함 -->
		<div class="swiper-wrapper">
			<div class="swiper-slide">Slide 1</div>
			<div class="swiper-slide">Slide 2</div>
			<div class="swiper-slide">Slide 3</div>
			<div class="swiper-slide">Slide 4</div>
			<div class="swiper-slide">Slide 5</div>
			<div class="swiper-slide">Slide 6</div>
			<div class="swiper-slide">Slide 7</div>
			<div class="swiper-slide">Slide 8</div>
			<div class="swiper-slide">Slide 9</div>
			<div class="swiper-slide">Slide 10</div>
		</div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
		
		 <!-- Add Pagination -->
		<div class="swiper-pagination"></div>
	</div>
</body>
</html>




실행결과




여러 개의 슬라이드를 만들고 싶을 때는 다음과 같이 합니다.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper.css">

  <!-- Demo styles -->
  <style>
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 300px;
      margin: 20px 0;
    }
    .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;
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container swiper1"> <!-- container 에 클래스 명이 한 개 더 추가 -->
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination1"></div>
  </div>

  <!-- Swiper -->
  <div class="swiper-container swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination2"></div>
  </div>

  <!-- Swiper -->
  <div class="swiper-container swiper3">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination3"></div>
  </div>

  <!-- Swiper JS -->
  <script src="swiper.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper1 = new Swiper('.swiper1', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination1',
        clickable: true,
      },
    });
    var swiper2 = new Swiper('.swiper2', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination2',
        clickable: true,
      },
    });
    var swiper3 = new Swiper('.swiper3', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination3',
        clickable: true,
      },
    });
  </script>
</body>
</html>




실행결과



실습: supercamp




/*----------- supercamp.css -----------------*/



*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.main_b{
	position:relative;
	height:700px;
	background: url(main-bg01_b.gif)
}
.wrap{
	width: 100%;	
	height:524px;
	background: url(main-bg01.gif);
}
.main{
	position:relative;
	height:524px;
	margin:auto;
}
/*---------------------swiper에 관한 css -------------------- */
.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;
}
.swiper1{
	/*width:980px;
	height:399px;*/
	width:100%;
	height:100%;
}
.swiper1 .swiper-pagination-bullet { /* 버튼 모양 */
    width: 20px;
    height: 20px;
    opacity: 0.5;
    background: #fff;
	margin:0 2px !important;
	
}
.swiper1 .swiper-pagination{
	bottom:192px;
	left:-424px;
}
.swiper1 .swiper-pagination-bullet-active {/* 버튼 모양-활성화 */
      color:#fff;
      opacity: 1;
}
.swiper2{
	position:absolute;
	width:245px;
	height:245px;
	bottom:120px;
	right:200px;
}
.swiper2 img{
	width:100%;
	height:100%;
	
}
.swiper2 .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    opacity: 0.5;
	border-radius: 0px;
    background: #f00;
}
.swiper2 .swiper-pagination-bullet-active {
      color:#f00;
      opacity: 0.8;
}
.swiper1 .swiper-slide:nth-child(1){
	background: url(main-bg01.gif);
}
.swiper1 .swiper-slide:nth-child(2){
	background: url(main-bg02.gif);
}
.swiper1 .swiper-slide:nth-child(3){
	background: url(main-bg03.gif);
}





/*----------- supercamp.js -----------------*/

$(function(){
	var swiper1 = new Swiper('.swiper1', {
		spaceBetween: 30,
		effect: 'fade',
		pagination: {
			el: '.swiper-pagination1',
			clickable: true,
		},
		autoplay: { 
			delay: 5000,
			disableOnInteraction: false,
		}
    });
    var swiper2 = new Swiper('.swiper2', {
		spaceBetween: 30,
		pagination: {
		el: '.swiper-pagination2',
		clickable: true,
		},
		autoplay: { /* 자동 실행 */
			delay: 5000,
			disableOnInteraction: false,
		}
    });
})





<!-------------------supercamp.html------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="swiper.css">
	<link rel="stylesheet" href="supercamp.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="swiper.js"></script>
	<script src="supercamp.js"></script>
</head>
<body>
<div class="main_b">
	<div class="wrap">
		<div class="main">
			<div class="swiper-container swiper1"> <!-- container 에 클래스 명이 한 개 더 추가 -->
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="main2.png" alt=""></div>
					<div class="swiper-slide"><img src="main1.png" alt=""></div>
					<div class="swiper-slide"><img src="main3.png" alt=""></div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination swiper-pagination1"></div>
			</div>

		  <!-- Swiper -->
			<div class="swiper-container swiper2">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="sub1.jpg" alt=""></div>
					<div class="swiper-slide"><img src="sub2.jpg" alt=""></div>
					<div class="swiper-slide"><img src="sub3.jpg" alt=""></div>
					<div class="swiper-slide"><img src="sub4.jpg" alt=""></div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination swiper-pagination2"></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>




실행결과