swiper 슬라이더 질문

Question

왼쪽 마우스 클릭하여 드래그 슬라이드 할때는 왼쪽, 오른쪽 화면이 잘 나오는데자동 loop 해놓으면 갑자기 오른쪽 사진이 사라지네요

/* css */ .main-banner-boxes { width: 100%; height: 790px; overflow: hidden; display: flex; align-items: flex-start; margin: 20px auto; position: relative; /* background-color: antiquewhite; */ } .swiper { width: 100%; height: 720px; } .swiper-wrapper .swiper-slide { filter: brightness(30%); transition: filter 1s; } .swiper-wrapper .swiper-slide-active { filter: brightness(100%); } .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .swiper-pagination { bottom: 40px; left: 0; right: 0; } .swiper-pagination .swiper-pagination-bullet { background-color: rgba(0, 0, 0, 0.5); } .swiper-pagination .swiper-pagination-bullet:last-child { } span.swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #C2935F; } /// / js / const swiper = new Swiper('.swiper', { loop: true, slidesPerView: '1.6', centeredSlides: true, spaceBetween: 20, autoplay: { delay: 2000, }, pagination: { el: '.main-banner-boxes .swiper-pagination', clickable: true, }, navigation: { prevEl: '.main-banner-boxes .swiper-button-prev', nextEl: '.main-banner-boxes .swiper-button-next', }, })

ㅇㅇ(192.168) · Answer

첫댓글 그냥 html쓰시는줄 알고 잘못 달았네요 만약 바닐라 html 사용하시는 거면 예제 드리겠습니다 대댓주세요swiper에 예제코드 그대로 복붙해서 써보시는거 추천합니다

ㅇㅇ(192.168) · Answer

바닐라 html 사용 하시는 거면

이 코드 그대로 사용해보세요 이미지 경로만 바꿔서요 cdn으로 파일 넣으시구요

데브폐인 · Answer

swiper 버전에 따라 조금 다르긴 한데,auto play 와 loop 를 쓰면 다음속성으로 해결되실겁니다.loopAdditionalSlides: 1,const swiper = new Swiper('.swiper', { loop: true, loopAdditionalSlides: 1, slidesPerView: '1.6', centeredSlides: true, spaceBetween: 20, autoplay: { delay: 2000, }, pagination: { el: '.main-banner-boxes .swiper-pagination', clickable: true, }, navigation: { prevEl: '.main-banner-boxes .swiper-button-prev', nextEl: '.main-banner-boxes .swiper-button-next', }, })

swiper 슬라이더 질문

3개의 답변

Q&A 목록