<-- 이렇게 정렬이 되야 되는데..

<-- 이렇게 내려옵니다.

처음에 웹브라우저를 열었을때는 문제없는데 창을 줄였다 늘리면 저렇게 되네요.

스와이프 옵션에서 세로를 한줄로 설정하거나 두줄이라도 아래에서 받쳐주는 이미지가 있으면 정상으로 나오고요.

또 f5를 누르면 다시 정상으로 정렬 됩니다.

margin padding postion을 top으로 레이아웃에 적용해도 고쳐지지 않습니다. 제 소스가 엉켜서 그런건가 싶기도 한데 다른 소스를 사용해도 저랬던 경험이 있어서 혹시 비슷한 증상 겪어 보신분 있으신가요? 가르침 부탁드립니다. 감사합니다. 

소스는 조금 복잡해서 요약하면 대략 아래와 같습니다.

<script src="<?php echo $latest_skin_url ?>/js/swiper.js"></script>
<link rel="stylesheet" href="<?php echo $latest_skin_url ?>/css/swiper.css">

<div class="swiper-container swiper-container-slide">
<div class="swiper-wrapper">
<?php
            for ($i=0; $i<$list_count; $i++) {

 $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'],  $thumb_width, $thumb_height, false, true);

?>

<div class="swiper-slide swiper-slide-slide" >

이미지 출력

</div>
    <div class="swiper-pagination swiper-pagination-slide"></div>

</div>
</div>

추가질문 --

스와이퍼 사용시 이미지가 가로 100%로 설정이 되서 그런지 창을 열때 순간적으로 이미지가 확대되서 정상크기로 줄어드는데 그 부분이 해결이 가능한지에 대해서도 여쭤봅니다. 창을 열었을때 번쩍 하는 느낌이 들어서 신경이 쓰이네요. 감사합니다.