$$config title: [ Spring ] 이미지 스와이프 keywords: - 이미지 스와이프 $$ # [GIT참고](https://github.com/Parkseonho/instaKG/commit/4038947056c7048ba5937c470fbf6637f9fd41db) # [ HTML ] ## Layout : css 참고 및 스크립트 관련 내용 추가 ```html . . . . ``` ## story : css 설정 / script 내용 추가 ```html .

. . var swiper = new Swiper(".mySwiper", { spaceBetween: 30, centeredSlides: true, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); . ``` # [ CSS ] ## swiper ```css html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } img { max-height:500px; } video { max-height:500px; } ```