구현화면
카페24 기존 구현 화면
카페24 상세페이지 상품이미지는 기본으로 하단 작은 이미지를 클릭하는 형식이다.
이미지를 슬라이드로 하고 싶은데, 이미지가 흐릿하게 깨져서 보인다.
우선 이미지를 나열하기 위해서는 module="product_addimage" 해당 모듈을 이용해야한다.
<div class="imgArea">
<div id="prdt_slider" class="swiper" module="product_addimage">
<div class="inner">
<ul class="list swiper-wrapper">
<li class="swiper-slide">{$add_img}</li>
<li class="swiper-slide">{$add_img}</li>
</ul>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
swiper을 사용해서 슬라이드 틀을 만들었다.
이게 중요한데, 해줘야하는 설정이 있다.
상품 설정에서 이미지 사이즈 변경을 해주자.
축소 이미지 사이즈를 키워주고 사진을 재업로드하면 된다.
그러면 product_addimage 모듈로 슬라이드 구현 가능!
참고 문서
728x90
반응형