// 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

});