현재 스와이퍼 작동 오류로 도와주세요 ㅜㅜㅜㅜ
본문
너무 급해서 다시 올립니다
스와이퍼가 첫장부터 순차적으로 나오지않고, 화면에 두장씩 보이도록 세팅한것도 안먹고
loop 해놓았는데 5장 나오고 끊깁니다
swiper-wrapper 너비를 건드려야 하는건지 스크립트 오류인지 도움 좀 부탁드리겠습니다 ㅜㅜ
html 입니다
<section class="hard rolling" data-aos="fade-up" data-aos-duration="1200" data-aos-offset="300">
<div class="w1240">
<div class="hardtxt">
</div>
<!-- Swiper -->
<div class="swiper mySwiper second">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="<?php echo G5_THEME_URL?>/img/roll-1.png">
</div>
<div class="swiper-slide">
<img src="<?php echo G5_THEME_URL?>/img/roll-2.png">
</div>
<div class="swiper-slide" >
<img src="<?php echo G5_THEME_URL?>/img/roll-3.png">
</div>
<div class="swiper-slide">
<img src="<?php echo G5_THEME_URL?>/img/roll-4.png">
</div>
<div class="swiper-slide">
<img src="<?php echo G5_THEME_URL?>/img/roll-5.png">
</div>
</div>
</div>
</div>
</section>
css 입니다
.w1240 {width: 1240px; margin: auto;}
.hardtxt h5.mb110 {margin-bottom: 110px;}
.mySwiper.second .swiper-slide img {width: 600px !important; height: 311px !important; transform: none !important; transition: 0.3s;}
.mySwiper.second .swiper-slide img:hover {filter: drop-shadow(2px 4px 6px rgb(160, 160, 160));}
js입니다
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper coverflow JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
var swiper = new Swiper(".mySwiper.second", {
initialSlide: 1,
effect: "slide",
observer: true,
observeParents: true,
grabCursor: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
loop: true,
slidesPerView: "2",
});
답변 1
<div class="swiper-slide">
<img src="<?php echo G5_THEME_URL?>/img/roll-1.png">
<img src="<?php echo G5_THEME_URL?>/img/roll-2.png">
<img src="<?php echo G5_THEME_URL?>/img/roll-3.png">
</div> 이런식으로 해보세요 스와이퍼 슬라이드 클래스를 이미지 여러개로 묶어주세요