Swiper Demos
위와 같이 HTML/CSS 이미지 슬라이드를 만들어보자!
먼저 사이트에 접속한다.
Swiper Demos
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
디자인 예시를 보면서 원하는걸 선택해 준다.
빨간색으로 밑줄친 Core에 들어가서 먼저 붙여넣을 것들을 붙여넣어준다
Core 에 들어가면 html 파일이 작성된걸 볼 수 있는데
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
10번째 줄에 있는 link를 Head 영역안에 붙여넣어준다
<Head> 영역안에 붙여넣고 제일 아래에 보이는
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
});
</script>
두가지 <script> 영역을 마찬가지 내 html 파일의 </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 class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-pagination"></div>
</div>
안의 코드들을 내 코드에 갖다 붙이고 원하는 대로 수정하면 된다
저는 이런식으로 이미지와 a 태그를 이용해서 3개 만들면 바로 이미지가 작동되는 모습을 확인할 수 있다.
이제 CSS에서 자기 입맛대로 꾸미면 된다.
참고로 마지막 swiper 예시에 나와있는 이미지에서 아래에 보이는
는 이미지 아래에 점들을 표현한걸로 다양한 옵션들이 있으니 추가해오면 된다.
아래는 내가 적용한 코드이다.
/* 스와이프 점 */
.swiper .swiper-pagination{
position: absolute;
display: block;
bottom: 55px !important;
text-align: left;
margin-left: 30px;
}
/* 선택된 점 */
.swiper .swiper-pagination-bullet {
background-color: rgb(237, 237, 237);
}
추가 옵션
아까 autoplay 같은 속성을 추가적으로 넣을 수 있다.
제일처음 사이트에 다양한 목록들이 있는 곳으로 가서 auto play가 있는곳을 찾아가
여기서도 마찬가지로 Core에 들어가서 코드를 가져오면 되는데
아까처럼 다 가져올 필요없이 우리가 필요한 속성만 갖고 와서 추가로 넣어주면 된다.
우리가 필요한 autoplay를 가져와서 코드에 넣어주면 된다. 주의할점은 , 를 이용해 속성들을 구분해줘야 한다.
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
'Front-End > JavaScript' 카테고리의 다른 글
| [비교] Callback함수, Promise함수 (0) | 2023.08.24 |
|---|---|
| [JS기본] 인터프리터, 호이스팅, 스코프, 렉시컬 환경, 엄격모드, 가비지 컬렉터 등 (0) | 2023.08.22 |
| 버블링 과 캡처링 (0) | 2023.03.31 |
| (JavaScript) This, Binding (0) | 2023.01.05 |
| (JavaScript)NPM과 NPX에 대해 쉽고 얕게 이해하기 (0) | 2022.12.27 |
