상품상세페이지에서 섬네일 이미지를 가로로 나열하려면

🙏SIR UI/UX 디자인 의뢰(~7/31)
상품상세페이지에서 섬네일 이미지를 가로로 나열하려면

QA

상품상세페이지에서 섬네일 이미지를 가로로 나열하려면

본문

아래 이미지와같이 상품상세페이지에서 섬네일 이미지를 가로로 나열하고 싶습니다. 기본테마를 사용중인데 어떤부분을 수정해야 할까요?
2582627467_1732739241.0951.png

이 질문에 댓글 쓰기 :

답변 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;} 추가

 

우선 위 처럼 먼저 해보세요

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT