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

カラーミーショップにて自社の販売サイトを制作中です。
商品詳細ページのスライドショーが動かず、商品写真が下にくだってしまい、困っています。
解決方法があればご教示ください。よろしくお願いします。
以下に現在のキャプチャーとソースコードを記載いたします。

##商品詳細ページ

xhtml
1<main>
2
3<link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.css">
4
5<link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick-theme.css">
6
7<!---<script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>--->
8
9<div class="p-product">
10
11  
12  <{if $product.id != ""}>
13
14  <div class="p-product u-container thirdlayer_section01 article">
15
16    <form name="product_form" method="post" action="<{$cart_url}>">
17
18      <div class="p-product-main">
19
20        <!-- 商品画像 -->
21
22        <div class="p-product-img  main-image">
23
24          <div class="p-product-img__main js-images-slider">
25
26            <div class="p-product-img__main-item basic">
27
28              <{if $product.img_url != ""}>
29
30              <img src="<{$product.img_url}>" alt="<{$productlist[num].name|escape:'html'}>" />
31
32              <{else}>
33
34              <img src="https://img.shop-pro.jp/tmpl_img/86/no-image.jpg" alt="<{$productlist[num].name|escape:'html'}>" />
35
36              <{/if}>
37
38            </div>
39
40            <{if $otherimg_num != 0}>
41
42            <{section name=num loop=$otherimg}>
43
44              <{if $otherimg[num].url != ""}>
45
46              <div class="p-product-img__main-item align">
47
48                <img src="<{$otherimg[num].url}>" alt="<{$productlist[num].name|escape:'html'}>" />
49
50              </div>
51
52              <{/if}>
53
54            <{/section}>
55
56            <{/if}>
57
58          </div>
59
60          <{if $otherimg_num != 0}>
61
62          <div class="p-product-img__thumb">
63
64            <div class="u-overflow-slide">
65
66              <ul class="p-product-thumb-list">
67
68                <{if $product.img_url != ""}>
69
70                <li class="p-product-thumb-list__item">
71
72                  <div class="p-product-thumb-list__img">
73
74                    <img src="<{$product.img_url}>" alt="<{$productlist[num].name|escape:'html'}>" />
75
76                  </div>
77
78                </li>
79
80                <{/if}>
81
82                <{section name=num loop=$otherimg}>
83
84                  <{if $otherimg[num].url != ""}>
85
86                  <li class="p-product-thumb-list__item">
87
88                    <div class="p-product-thumb-list__img">
89
90                      <img src="<{$otherimg[num].url}>" alt="<{$productlist[num].name|escape:'html'}>" />
91
92                    </div>
93
94                  </li>
95
96                  <{/if}>
97
98                <{/section}>
99
100              </ul>
101
102            </div>
103
104          </div>
105
106          <{/if}>
107
108        </div>
109
110        <!-- // 商品画像 -->
111
112       
113
114        </div><!-- /.p-product-info -->
115
116      </div><!-- /.p-product-main -->
117
118      <!-- // 商品情報・カート -->
119
120
121
122      <{$product.info}>
123
124    </form>
125
126  <{else}>
127
128    <{if $product.hide_flg == true}>
129
130    <div class="p-product u-container">
131
132      <p class="mar_t_50 txt_c txt_18">この商品を閲覧するにはログインが必要です。</p>
133
134    </div>
135
136    <{else}>
137
138    <div class="p-product u-container">
139
140      <p class="mar_t_50 txt_c txt_18">現在、この商品は扱っておりません。</p>
141
142    </div>
143
144    <{/if}>
145
146  <{/if}>
147
148</div>
149
150<{* ↓↓ デバイスサイズ変更時にオプション選択フォームの表示切替に使用 ↓↓ *}>
151
152<{if $option_output_mode}>
153
154  <div class="hide">
155
156    <div class="prd-opt-select">
157
158      <{section name=num loop=$option}>
159
160      <div class="p-product-option-select__box">
161
162        <div class="p-product-option-select__ttl">
163
164          <{$option[num].name}>
165
166        </div>
167
168        <select name="<{$option[num].select_name}>" class="product_cart_select">
169
170          <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
171
172        </select>
173
174      </div>
175
176      <{/section}>
177
178    </div>
179
180    <div class="prd-opt-table">
181
182      <{$option_table}>
183
184    </div>
185
186  </div>
187
188<{/if}> 
189
190  
191
192
193
194
195
196  </div>
197
198  
199
200  </main>
201
202<!---<script
203
204  src="https://code.jquery.com/jquery-3.6.0.min.js"
205
206  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
207
208  crossorigin="anonymous"></script>--->
209
210<script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>
211
212
213
214<script>
215
216$(document).on("ready", function() {
217
218  var slider = ".js-images-slider";
219
220  var thumbnailItem = ".p-product-thumb-list__item";
221
222
223
224  $(thumbnailItem).each(function() {
225
226    var index = $(thumbnailItem).index(this);
227
228    $(this).attr("data-index",index);
229
230  });
231
232
233
234  $(slider).on('init',function(slick) {
235
236    var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
237
238    $(thumbnailItem+'[data-index="'+index+'"]').addClass("is-current");
239
240  });
241
242
243
244  $(slider).slick( {
245
246    autoplay: false,
247
248    arrows: true,
249
250    infinite: true
251
252  });
253
254
255
256  $(thumbnailItem).on('click',function() {
257
258    var index = $(this).attr("data-index");
259
260    $(slider).slick("slickGoTo",index,false);
261
262  });
263
264
265
266  $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
267
268    $(thumbnailItem).each(function() {
269
270      $(this).removeClass("is-current");
271
272    });
273
274    $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("is-current");
275
276  });
277
278});
279
280 
281</script>
282
283```
284```css
285@charset "utf-8";
286
287
288/*商品詳細ページ*/
289
290.thirdlayer_section01{
291
292    width:1000px;
293
294    margin:60px auto 100px auto;
295
296    display: flex;
297
298    flex-direction: row;
299
300
301
302    clear: both;
303
304}
305
306.left-side{
307
308    width:500px;
309
310    display: flex;
311
312    flex-direction: row;
313
314    flex-wrap:wrap;
315
316    align-content: flex-start;
317
318  position:relative;
319
320
321
322}
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353.itemphoto01 li {
354
355  width: 500px;
356
357  height:500px;
358
359  overflow: hidden;
360
361}
362
363.itemphoto01 li.item2,
364
365.itemphoto01 li.item3,
366
367.itemphoto01 li.item4 {
368
369  display: none;
370
371}
372
373.itemphoto01 li:hover img {
374
375  opacity: 0.8;
376
377  filter: alpha(opacity=80);
378
379  -ms-filter: "alpha(opacity=80)";
380
381}
382
383.thumb{
384
385    display: flex;
386
387    flex-direction: row;
388
389}
390
391.thumb,
392
393.thumb li {
394
395  margin: 0;
396
397  padding: 0;
398
399  list-style: none;
400
401}
402
403.thumb li {
404
405  display: block;
406
407  width: 125px;
408
409  height: 125px;
410
411  overflow: hidden;
412
413  cursor: pointer;
414
415  vertical-align: top;
416
417  margin-bottom: 0;
418
419}
420
421.thumb li img {
422
423  width: 100%;
424
425  height: auto;
426
427}
428
429.thumb li:hover img {
430
431  opacity: 0.8;
432
433  filter: alpha(opacity=80);
434
435  -ms-filter: "alpha(opacity=80)";
436
437}
438
439
440
441
442
443
444
445

1T2R3M4

2021/11/20 04:25

https://shop-pro.jp/?mode=support 上記で確認されてみてはいかがでしょうか。

ema-material

2021/11/20 04:34

ありがとうございます。デザインカスタマイズのサポートはカラーミーの公式では受け付けてくれません。

1T2R3M4

2021/11/20 04:37

【1】気になる部分だけ重点的に『設定代行・部分カスタマイズコース』【2】デザインまるごとプロにお任せ『デザインフルカスタマイズコース』とあるみたいですけど。

Lhankor_Mhy

2021/11/22 08:19

jQuery の読み込み部分をご提示ください。

ema-material

2021/11/22 21:25

コメントありがとうございます。検証のために3.6.0のCDNをコメントアウトしていたのですがコメントアウトを解除しても解決しませんでした。

Lhankor_Mhy

2021/11/24 01:08

ということは、実際のページでは jQuery 3.6.0 を読み込んでいるという理解でいいのでしょうか？

ema-material

2021/11/24 04:25

はい。そうなります。また、以下のurlの記事によると、カラーミーショップにはjQueryのCDN（verは低そうですが）がデフォルトで読み込まれた状態のようです。 https://naeco.jp/colorme-know-how

Lhankor_Mhy

2021/11/24 04:38

問題を把握しました。とはいえ、jQuery を複数読み込むのはあまり良いことではないです。

行動規範の内容に同意します

回答1件

ベストアンサー

There is also $(document).on( "ready", handler ), deprecated as of jQuery 1.8 and removed in jQuery 3.0

.ready() | jQuery API Documentation

とのことですので、jQuery3系では動作しない書き方です。

投稿2021/11/24 05:01

Lhankor_Mhy

総合スコア36074

ema-material

2021/11/24 05:47

ありがとうございます！なるほど1.8以降のCDNはだめだということなので複数読み込まれていたCDNをコメントアウトした上でカラーミーショップの共通ページ（ワードプレスでいうところのheader.php）に <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> と記述しましたが、変化ありませんでした。