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>