head
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
커스텀은 body 닫기 직전
<script src="js/custom.js"></script>
html
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<div class="text-wrap">
<h2>hhh</h2>
<p>ppp</p>
</div>
<img src="img/img-01.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<div class="text-wrap">
<h2>hhh</h2>
<p>ppp</p>
</div>
<img src="img/img-02.jpg" alt="">
</a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
custom.js
const swiper = new Swiper('.swiper', {
slidesPerView: 1,
spaceBetween: 10,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
active 효과
.text-wrap {position: absolute;top:50%;left:0;right:0;width: 600px;opacity: 0;margin:auto;text-align: center;transition: 0.5s; }
.swiper-slide-active .text-wrap {top:44%;opacity: 1;transition: 0.5s; }
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
'Open Source' 카테고리의 다른 글
티스토리 특정 카테고리에서만 댓글쓰기창 사용하기 (0) | 2023.01.21 |
---|---|
자주 쓰는 오픈소스 링크 모음 (0) | 2023.01.18 |
이미지를 ICO, 파비콘으로 변환해주는 사이트들 (0) | 2023.01.17 |
자주 쓰는 무료 웹폰트 아이콘 링크 모음 (0) | 2023.01.17 |
codepen (0) | 2023.01.16 |
lightbox Plugin (0) | 2023.01.16 |
스플라인, 3D 웹도구 (0) | 2023.01.16 |
캔바 디자인 도구 (0) | 2023.01.16 |