상품상세페이지에서 섬네일 이미지를 가로로 나열하려면
본문
답변 2
- skin/shop/basic/item.info.skin.php
<div id="sit_pvi_thumb">
<ul style="display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px;">
<?php for ($i=0; $i<count($thumb); $i++) { ?>
<li style="list-style: none;">
<img src="<?php echo $thumb[$i]['src']; ?>" alt="<?php echo $thumb[$i]['alt']; ?>" style="border:1px solid #dbdbdb; cursor: pointer;" onclick="document.querySelector('#sit_pvi_big img').src='<?php echo $thumb[$i]['src']; ?>';">
</li>
<?php } ?>
</ul>
</div>
- skin/shop/basic/style.css
#sit_pvi_thumb {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 10px 0;
}
#sit_pvi_thumb li {
flex-shrink: 0;
list-style: none;
}
#sit_pvi_thumb img {
border: 1px solid #dbdbdb;
cursor: pointer;
transition: transform 0.2s ease;
}
#sit_pvi_thumb img:hover {
transform: scale(1.1);
border-color: #010101;
}
item.form.skin.php 입니다
이 정도 디자인을 못비꾼다면 수정하기가 어렵겠습니다
id="sit_pvi_big"
id="sit_pvi_thumb"
위 두가지 스타일 float로 되어있는 것 삭제 (shop/basic/style.css)
#sit_pvi_thumb li{ dispay:inline-block;} 추가
우선 위 처럼 먼저 해보세요
답변을 작성하시기 전에 로그인 해주세요.