<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>swiper gallery</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.css'>
<!--style -->
<style>
*{
padding:0;
margin:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
color:#000;
}
.wrap{
width: 100%;
margin:0 auto;
}
.inner{
width: 1400px;
margin:0 auto;
}
.section_slider{
width: 100%;
padding: 50px 0;
}
.section_slider .topBox{
width: 100%;
text-align: center;
margin-bottom: 50px;
}
.section_slider .topBox .tit{
width: 100%;
font-size: 56px;
letter-spacing: -5px;
margin-bottom: 10px;
}
.section_slider .topBox .txt{
font-size: 28px;
color: #888;
font-weight: 500;
}
.section_slider .swiper-container{
width: 80%;
position:relative;
height:600px;
margin: 0 auto;
}
.section_slider .swiper-container .swiper-wrapper{
width: 100%;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide{
position:relative;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide .imgBox{
width: 70%;
position:relative;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide .imgBox img{
width: 100%;
height:100%;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide .imgBox .square{
display: block;
width: 200px;
height: 100%;
background: rgba(255,255,255,0.5);
position:absolute;
right:0;
top: 0;
z-index:100;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide .txtBox{
width: 40%;
position:absolute;
right:0;
top:20%;
z-index:200;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide .txtBox h2{
font-size:38px;
margin-bottom: 30px;
letter-spacing: -2px;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide .txtBox h2 span{
display: block;
text-transform: uppercase;
font-size:48px;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide .txtBox p{
text-align: justify;
}
.section_slider .swiper-container .swiper-wrapper .swiper-slide .num{
font-size:120px;
font-weight: 900;
color:rgba(16,47, 65, 0.08);
position:absolute;
right:0;
bottom:10%;
z-index:1;
}
/* arrow */
.section_slider .swiper-container .swiper-button-prev, .section_slider .swiper-container .swiper-button-next{
width: 50px;
height: 50px;
background-image: none;
background-color: #e4e4e4;
z-index:100;
cursor: pointer;
/* text-align: center;
line-height: 50px; */
}
.section_slider .swiper-container .swiper-button-prev{
position:absolute;
top:22px;
left:0;
}
.section_slider .swiper-container .swiper-button-next{
position:absolute;
top:22px;
right: 0;
}
.section_slider .swiper-container .swiper-button-prev i, .section_slider .swiper-container .swiper-button-next i{
position:absolute;
left:50%;
top:50%;
color:#000;
transform:translate(-50%, -50%);
transition: all 0.3s ease-in-out;
}
@keyframes arrowRight {
0%{
transform: translate(0, -50%);
}
50%{
transform: translate(-10px, -50%);
}
100%{
transform: translate(0, -50%);
}
}
.section_slider .swiper-container .swiper-button-prev:hover i, .section_slider .swiper-container .swiper-button-next:hover i{
animation:arrowRight 1s infinite;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div class="section_slider">
<div class="topBox">
<h2 class="tit">실전! 웹사이트제작 STEP BY STEP!</h2>
<p class="txt">함께 제작해 볼 클론코딩 사이트입니다.</p>
</div>
<div class="swiper-container">
<!-- swiper plugin -->
<div class="swiper-wrapper">
<!-- slide01 -->
<div class="swiper-slide">
<div class="imgBox" data-swiper-parallax-y="70%">
<img src="img/slide_01.jpg" alt="슬라이드01">
<span class="square" data-swiper-parallax-y="70%"></span>
</div>
<div class="txtBox" data-swiper-parallax-x="-60%">
<h2><span>Daebang</span>Clone Coding</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non quasi ab reiciendis sequi
vitae quam error laboriosam veniam voluptatum voluptate quos voluptatibus
dolor corporis cumque, est, odit officiis. Suscipit, cum.
</p>
</div>
<p class="num" data-swiper-parallax-y="-60%">01.</p>
</div>
<!-- slide02 -->
<div class="swiper-slide">
<div class="imgBox" data-swiper-parallax-y="70%">
<img src="img/slide_02.jpg" alt="슬라이드02">
<span class="square" data-swiper-parallax-y="70%"></span>
</div>
<div class="txtBox" data-swiper-parallax-x="-60%">
<h2><span>Concierge</span>Clone Coding</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non quasi ab reiciendis sequi
vitae voluptatum voluptate quos voluptatibus
dolor corporis cumque, est, odit officiis. Suscipit, cum.
</p>
</div>
<p class="num" data-swiper-parallax-y="-60%">02.</p>
</div>
<!-- slide03 -->
<div class="swiper-slide">
<div class="imgBox" data-swiper-parallax-y="70%">
<img src="img/slide_03.jpg" alt="슬라이드03">
<span class="square" data-swiper-parallax-y="70%"></span>
</div>
<div class="txtBox" data-swiper-parallax-x="-60%">
<h2><span>Musign</span>Clone Coding</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non quasi ab reiciendis sequi
vitae quam error laboriosam veniam voluptatum
dolor corporis cumque, est, odit officiis. Suscipit, cum.
</p>
</div>
<p class="num" data-swiper-parallax-y="-60%">03.</p>
</div>
<!-- slide04 -->
<div class="swiper-slide">
<div class="imgBox" data-swiper-parallax-y="70%">
<img src="img/slide_04.png" alt="슬라이드04">
<span class="square" data-swiper-parallax-y="70%"></span>
</div>
<div class="txtBox" data-swiper-parallax-x="-60%">
<h2><span>Clew A La Mord</span>Clone Coding</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non quasi ab reiciendis sequi
vitae quam error laboriosam veniam voluptatum
dolor corporis cumque, est, odit officiis. Suscipit, cum.
</p>
</div>
<p class="num" data-swiper-parallax-y="-60%">04.</p>
</div>
</div>
<div class="swiper-button-next">
<!-- swiper버튼 클래스명 -->
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</div>
<div class="swiper-button-prev">
<i class="fa fa-long-arrow-left" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<!-- script -->
<!-- 플러그인을 적용하기 전에 연결시키고, 그 다음에 css를 작성해야 한다. -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js'></script>
<script src="js/slide_ex.js"></script>
</body>
</html>
/*slide_ex.js*/
if(window.innerWidth < 1200) {
// 반응형 고려
new Swiper(".swiper-container",{
direction: "horizontal",
slidesPerView: 1,
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
paginationClickable: !0,
spaceBetween: 0,
autoplay: 1500,
loop: !0
})
} else {
new Swiper(".swiper-container",{
direction: "horizontal",
slidesPerView: 1,
parallax: !0,
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
paginationClickable: !0,
spaceBetween: 0,
speed: 1500,
parallax: !0,
autoplay: 1500,
loop: !0
})
}