swiper 반응형
본문
<style>
.swiper-container {
width: 60%;
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{}
.swiper-slide img:last-child{display:none;}
.swiper-slide:hover img:first-child{display:none;}
.swiper-slide:hover img:last-child{display:inline-block;}
</style>
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#">1<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
<div class="swiper-slide"><a href="#">2<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
<div class="swiper-slide"><a href="#">3<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
<div class="swiper-slide"><a href="#">4<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
<div class="swiper-slide"><a href="#">5<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
<div class="swiper-slide"><a href="#">6<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
<div class="swiper-slide"><a href="#">7<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
<div class="swiper-slide"><a href="#">8<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
<div class="swiper-slide"><a href="#">9<img src="<?=G5_THEME_URL?>/img/success_img01.jpg"><img src="<?=G5_THEME_URL?>/img/success_img01_on.jpg"></a></div>
</div>
<div style="margin:25px 0px;"></div>
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 4,
spaceBetween: 40,
},
1024: {
slidesPerView: 5,
spaceBetween: 50,
},
}
});
</script>
swiper 반응형으로 하려고 "breakpoints:" 추가하였는데도
안됩니다 ㅠㅠ 어떻게 수정해야 될까요?ㅠㅠ
!-->
답변을 작성하시기 전에 로그인 해주세요.