스와이퍼에서 가로 줄이 계단식으로 내려오는 증상.
본문
<-- 이렇게 정렬이 되야 되는데..
<-- 이렇게 내려옵니다.
처음에 웹브라우저를 열었을때는 문제없는데 창을 줄였다 늘리면 저렇게 되네요.
스와이프 옵션에서 세로를 한줄로 설정하거나 두줄이라도 아래에서 받쳐주는 이미지가 있으면 정상으로 나오고요.
또 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%로 설정이 되서 그런지 창을 열때 순간적으로 이미지가 확대되서 정상크기로 줄어드는데 그 부분이 해결이 가능한지에 대해서도 여쭤봅니다. 창을 열었을때 번쩍 하는 느낌이 들어서 신경이 쓰이네요. 감사합니다.
답변 2
css float으로 했나요? 클리어 안해서 그런거 아닌가요?
조언주셔서 제 소스 문제라고 확신하고 다시 한번 살펴보다가 해결했습니다.
spaceBetween: 30, // 간격 <-- 스와이퍼 옵션에서 이부분 제거하고 출력쪽에서 여백 설정했더니
줄이 맞춰지네요. 감사합니다.
아~! 다행이에요
주소를 올리시면 좀 더 도움 받기 쉬우실거 같습니다. 아무래도 디자인 관련이라서요.
오랜 문제였는데 제 소스문제라고 확신하고 접근하니 해결이 되네요.
추가질문에 올린 이미지 확대 축소 문제는 조금 더 살펴보고 조언 구해보도록 하겠습니다.
정말 감사합니다.
