탭메뉴 슬릭슬라이더 이미지 충돌
본문
관리자단에서 이미지 추가시 탭메뉴안에 슬릭슬라이더 중복 충돌이 일어나 이미지 자체가 사라지는데 해결 부탁드립니다ㅠㅠ
// html 코드
<div class="cont" style="display: none">
<th:block th:each="store: ${storeList}">
<div class="inner clearfix" style="display: none;"
data-th-id="${store?.seq}" data-th-if="${#stringUtil.equals(store?.expsYn, #mapUtil.getKey(map.expsYnMap, '노출'))}" >
<div class="left-area">
<ul>
<li class="name" data-th-text="${store?.nm}"></li>
<li class="location" data-th-text="${store?.addr + store?.dtlAddr}"></li>
<li class="report tel" data-th-text="|전화번호 : ${store?.repTel}|"></li>
</ul>
</div>
<div id="slick" class="right-area" th:if="${store?.storeImages?.size() > 0}">
<th:block th:each="storeImage : ${store?.storeImages}">
<img class="details-img" th:src="${storeImage?.img}" alt="매장 상세 이미지">
</th:block>
</div>
</div>
</th:block>
</div>
// 탭메뉴
function showStoreDetail(storeIdx) {
const storeDetailDiv = $('#'+storeIdx);
$('.cont').show();
storeDetailDiv.fadeIn(200);
$('.cont >').not(storeDetailDiv).fadeOut(200);
}
//슬릭슬라이더
$("#slick-img").slick({
infinite: true,
customPaging: function (slider, i) {
return (i + 1) + ' / ' + slider.slideCount;
},
variableWidth:true,
dots: true,
setPosition: 0,
slidesToShow:1,
slidesToScroll: 1
});
답변을 작성하시기 전에 로그인 해주세요.
