아래 이미지와같이 상품상세페이지에서 섬네일 이미지를 가로로 나열하고 싶습니다. 기본테마를 사용중인데 어떤부분을 수정해야 할까요?
|
답변 2개 / 댓글 3개
채택된 답변
+20 포인트
Glitter Gim- skin/shop/basic/item.info.skin.php
Copy
<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
Copy
#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;
}답변에 대한 댓글 2개
스노우맨3
2024-11-28 (목) 10:34:50
2024-11-28 (목) 12:55:47
item.form.skin.php 입니다
이 정도 디자인을 못비꾼다면 수정하기가 어렵겠습니다
id="sit_pvi_big"
id="sit_pvi_thumb"
위 두가지 스타일 float로 되어있는 것 삭제 (shop/basic/style.css)
#sit_pvi_thumb li{ dispay:inline-block;} 추가
우선 위 처럼 먼저 해보세요
답변에 대한 댓글 1개
스노우맨3
2024-11-28 (목) 18:02:54
실력?(취미로 하는지라 실력이라고 말하기도 창피하지만......)이 미천하여 죄송합니다.........가끔 코드는 쳐다도 보기싫을때가 있어서.................그러 습니다..........ㅠ.ㅠ
답변을 작성하려면 로그인이 필요합니다.
skin/shop/basic/item.info.skin.php이 이미지를 가로로 나열하는것과 관계가있나요?