swiper 적용시키는데 css에서 저장해야만 적용이 됩니다..도와주세요

Question

.header_img{ width: 100%; overflow: hidden; } .img_button{ position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100vh; padding: 0; z-index: 99; } .swiper-wrapper { display: flex; } .swiper-slide { width: 100%; height: auto; } .img_button>li{ width: 100%; } .img_pr, .img_ne{ position: relative; width: 100%; height: 100vh; } .img_pr::before{ position: relative; left: 20%; top: 50%; content: ''; width: 32px; height: 32px; border-radius: 2px; border-top: 4px solid #fff; border-right: 4px solid #fff; transform: rotate(-135deg); opacity: 50%; display: inline-block } .img_ne::before{ position: relative; left: 80%; top: 50%; content: ''; width: 32px; height: 32px; border-radius: 2px; border-top: 4px solid #fff; border-right: 4px solid #fff; transform: rotate(45deg); opacity: 50%; display: inline-block } .header_inner{ display: flex; width: 100%; height: 100vh; transition: transform 1s ease; } .slide{ flex:0 0 100%; } .s1{ background-image: url(./img/img.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100vh; } .s2{ background-image: url(./img/img.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100vh; } .s3{ background-image: url(./img/img.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100vh; } var swiper = new Swiper(".mySwiper", { slidesPerView: 1, spaceBetween: 30, loop: true, navigation: { nextEl: ".img_ne", prevEl: ".img_pr", }, }); 자바스크립트로는 도저히 안되어서 스와이퍼 이용을 했는데 적용이 안됩니다.안된다기보다는 html 에서 ctrl + s 를 눌러도 안되고 js 에서 ctrl + s 눌러도 안되는데 이상하게 css 에서 ctrl + s 를 누르면 적용이 됩니다. 그런데 적용되지만 또 next 버튼이나 prev버튼 몇번 누르면 갑자기 적용이 안되면서 없어집니다. 이유가 뭘까요 ㅠㅠ?

월급은나의빛 · Answer

다음과 같이 하나의 html 파일로 만들어서 확인해 보니, 태그 때문인 것 같습니다. 때문에 리로딩되나 봅니다.

든 뭐든 다른 것 쓰면 됩니다. Swiper demo

// removed a tag

Prev
Next

swiper 적용시키는데 css에서 저장해야만 적용이 됩니다..도와주세요

1개의 답변

#swiper 목록