swiper 저만 가로이미지 오류나나요?
본문
가로 사이즈가 줄어들면 옆에 이미지가 침범합니다.
.visual {
position: relative;
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;
}
<div class="visual">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/visual1.jpg"></div>
<div class="swiper-slide"><img src="img/visual2.jpg"></div>
<div class="swiper-slide"><img src="img/visual3.jpg"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
cssMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination'
},
loop: true,
centereaSlides: false,
mousewheel: true,
keyboard: true,
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
