【Smarty & jQuery】商品詳細ページスライドショー動作しない【カラーミーショップ】

おせわになっております。
表題のとおり、カラーミーショップのオリジナルテンプレート作成中にて
意図した通りのデザインにならず、困っております。
具体的には、どうやらSlickの読み込みがうまくいっていないようで、スライドショーが動作しません。
添付のキャプチャのように写真が全部表示されてしまっています。
イメージ説明

自分なりにしらべたことは、jQuery CDNのバージョンが合わないと動作しないことがあるということで
書き換えましたが変化はありませんでした。

ご教示いただけますと助かります。
よろしくお願いします。

##共通ページヘッダーにあたる部分

html
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

#商品詳細ページ

html
<main>
<link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.css">
<link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick-theme.css">
<script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>
<div class="p-product">
  <!-- パンくずリスト -->
  	<ul class="breadcrumb-wrapper">
		<li class="breadcrumb01"><a href="<{$home_url}>">Home</a></li>

		<li class="breadcrumb02"><a href="<{$bid_link}>"><{$bid_name}></a></li>

		<li class="breadcrumb03"><{$product_name}></li>

	</ul>
  <!-- //パンくずリスト -->
  <{if $product.id != ""}>
  <div class="p-product u-container thirdlayer_section01 article">
    <form name="product_form" method="post" action="<{$cart_url}>">
      <div class="p-product-main">
        <!-- 商品画像 -->
        <div class="p-product-img">
          <div class="p-product-img__main js-images-slider">
            <div class="p-product-img__main-item basic">
              <{if $product.img_url != ""}>
              <img src="<{$product.img_url}>" alt="<{$productlist[num].name|escape:'html'}>" />
              <{else}>
              <img src="https://img.shop-pro.jp/tmpl_img/86/no-image.jpg" alt="<{$productlist[num].name|escape:'html'}>" />
              <{/if}>
            </div>
            <{if $otherimg_num != 0}>
            <{section name=num loop=$otherimg}>
              <{if $otherimg[num].url != ""}>
              <div class="p-product-img__main-item align">
                <img src="<{$otherimg[num].url}>" alt="<{$productlist[num].name|escape:'html'}>" />
              </div>
              <{/if}>
            <{/section}>
            <{/if}>
          </div>
          <{if $otherimg_num != 0}>
          <div class="p-product-img__thumb">
            <div class="u-overflow-slide">
              <ul class="p-product-thumb-list">
                <{if $product.img_url != ""}>
                <li class="p-product-thumb-list__item">
                  <div class="p-product-thumb-list__img">
                    <img src="<{$product.img_url}>" alt="<{$productlist[num].name|escape:'html'}>" />
                  </div>
                </li>
                <{/if}>
                <{section name=num loop=$otherimg}>
                  <{if $otherimg[num].url != ""}>
                  <li class="p-product-thumb-list__item">
                    <div class="p-product-thumb-list__img">
                      <img src="<{$otherimg[num].url}>" alt="<{$productlist[num].name|escape:'html'}>" />
                    </div>
                  </li>
                  <{/if}>
                <{/section}>
              </ul>
            </div>
          </div>
          <{/if}>
        </div>
        <!-- // 商品画像 -->
 

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>	
<script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>

<script>
$('.main-image').on('init', function(event, slick) {
  if(slick.slideCount <= 6) {
    $('.product-image-sub').css('padding-left','0');
    $('.product-image-sub').css('padding-right','0');
  }
})
.slick({
  arrows: false,
  asNavFor: '.thumb',
  slidesToShow: 1,
});
$('.thumb').slick({
  prevArrow: '<svg class="slick-prev" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>',
  nextArrow: '<svg class="slick-next" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',
  asNavFor: '.main-image',
  arrows: true,
  slidesToShow: 6,
  slidesToScroll: 1,
  focusOnSelect: true,
});

</script>

</div>
	
	</main>

css
/* 商品画像 slider */
.p-product-img__main .slick-track {
  margin-left: 0;
  margin-right: 0;
}
.p-product-img__main .slick-prev, .p-product-img__main .slick-next {
  top: 50%;
  width: 30px;
  height: 30px;
  transition: all 0.4s ease;
  z-index: 1;
}

.p-product-img__main .slick-prev:before, .p-product-img__main .slick-next:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 10px;
  width: 15px;
  height: 15px;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
  transition: all 0.4s ease;
  z-index: 1;
}

.p-product-img__main .slick-prev {
  left: 15px;
}

.p-product-img__main .slick-prev:before {
  transform: rotate(-45deg);
}

.p-product-img__main .slick-next {
  right: 15px;
}

.p-product-img__main .slick-next:before {
  left: 4px;
  transform: rotate(135deg);
}