728x90
가로로 슬라이딩 되는 화면을 만들고 싶을 때 사용하면 된다.
자동으로 슬라이딩되게 하거나 수동으로 슬라이딩 되게 만들 수 있다.
구현 방법은 아래와 같다.
자동 슬라이드 말고 수동으로 슬라이드 하고 싶다면 autoplay 옵션 자체를 주지 않으면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<script type = "text/javascript">
new Swiper('.swiper-container', {
slidesPerView: 'auto', //한번에 보여줄 요소 갯수 지정. auto 로 설정해도 됨.
spaceBetween: 30, //슬라이드간 padding 값 30px 씩 떨어뜨려줌
loop: false, //loop 를 true 로 할경우 무한반복 슬라이드
autoplay: {
delay: 2000, //2초에 한번씩 자동으로 슬라이드
},
});
</script>
</body>
</html>위 코드를 .html 파일로 만들어서 브라우저로 실행하면
Slide1, Slide2, Slide3 이 2초에 한번씩 자동으로 슬라이드 되는 것을 확인할 수 있다.
한가지 주의할 점은 new Swiper('.swiper-container' ... 와 같이 실제 슬라이드 설정할 때
타겟에 해당하는 .swiper-container 가 반드시 display:block 상태여야 한다.
난 이것 때문에 반나절을 허비함..
예를 들어 Swiper 타겟 자체를 display:block / display:none 와 같이 다이나믹 하게 사용할 경우
display:none 상태에서 new Swiper('.swiper-container' ... 를 하고
최종적으로 display:block 할 경우 적용은 되는데 비정상적으로 동작한다.
나의 경우 한쪽으로 무한히 이동되는데 반복이 아니라 빈화면으로 이동됐었다.
728x90
'Frontend > JavaScript' 카테고리의 다른 글
| jquery Deferred (0) | 2023.05.18 |
|---|---|
| ES6 object-shorthand 문법 (0) | 2021.03.10 |
| ES6 비구조화 할당 문법 (0) | 2021.03.10 |
| 클래스, 객체, 인스턴스 (0) | 2021.03.09 |
| 클로저 (0) | 2021.03.09 |