1.swiper CSS 적용
2.swiper js 적용
3.script 내용 추가
swiper 사이트 > Demos > 비슷한 슬라이드 Core > 스크립트부분 복사해서 비교
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: "auto",
freeMode: true,
});
</script>
4.swiper 마크업
<div class="swiper mySwiper">
<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>
</div>
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="css/basic.css">
<script defer src="js/main.js"></script>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<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>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Swiper JS -->
</body>
</html>
script
// Initialize Swiper
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
css
body {
margin: 0;
padding: 0;
}
.swiper {
width: 50%;
height: 50vh;
margin-top: 200px;
position: relative;
background-color: blue;
}
.swiper-slide {
font-size: 18px;
background: green;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide p{
position: absolute;
top:0;
left:0;
margin:0;
background-color: blue;
}
.swiper-button-prev {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid black;
top: 0;
left: 0;
margin: 0;
z-index: 999;
}
.swiper-button-prev:after {
display: none;
}
'Jquery > 플러그인' 카테고리의 다른 글
| [플러그인]slick (0) | 2022.08.18 |
|---|