teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

コンソールのキャプチャーを追加しました。

2021/11/20 03:35

投稿

ema-material
ema-material

スコア29

title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,8 @@
4
4
  具体的には、どうやらSlickの読み込みがうまくいっていないようで、スライドショーが動作しません。
5
5
  添付のキャプチャのように写真が全部表示されてしまっています。
6
6
  ![イメージ説明](7156e0442b9e1229a599b328892feddf.png)
7
+ ![イメージ説明](44d25f67de09cdc030958a2fa37905b6.png)
8
+ ![イメージ説明](0d364f5e6980ff80affef2d101e31e73.png)
7
9
 
8
10
  自分なりにしらべたことは、jQuery CDNのバージョンが合わないと動作しないことがあるということで
9
11
  書き換えましたが変化はありませんでした。

1

質問内容をより具体的に変更しました。

2021/11/20 03:35

投稿

ema-material
ema-material

スコア29

title CHANGED
@@ -1,1 +1,1 @@
1
- 商品詳細ページスライドショー メイン写真が重ってくれない【カラーミーショップ】
1
+ 【Smarty & jQuery】商品詳細ページスライドショー 動作しない【カラーミーショップ】
body CHANGED
@@ -1,35 +1,51 @@
1
1
  おせわになっております。
2
2
  表題のとおり、カラーミーショップのオリジナルテンプレート作成中にて
3
3
  意図した通りのデザインにならず、困っております。
4
- 具体的には、メイン写真サムネイルをクリックするとスライドショーするために
4
+ 具体的には、どうやらSlickの読み込みうまくいっていないようで、スライドショーが動作しません。
5
+ 添付のキャプチャのように写真が全部表示されてしまっています。
6
+ ![イメージ説明](7156e0442b9e1229a599b328892feddf.png)
5
7
 
8
+ 自分なりにしらべたことは、jQuery CDNのバージョンが合わないと動作しないことがあるということで
6
- 親要素position:relative;
9
+ 書き換えましたが変化はありませんでした。
7
- 子要素positoin:absolute;
8
- left:0;
9
- top:0;
10
10
 
11
- で同じ位置に配置させたいのですが、下にくだってしまい困っております。
12
11
  ご教示いただけますと助かります。
12
+ よろしくお願いします。
13
13
 
14
- カラーミーショップなのでhtmlは<main>以降となります。
15
- どうぞよろしくお願いします。
16
14
 
15
+
16
+ ##共通ページ ヘッダーにあたる部分
17
17
  ```html
18
+ <script
19
+ src="https://code.jquery.com/jquery-3.6.0.min.js"
20
+ integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
21
+ crossorigin="anonymous"></script>
22
+ ```
23
+
24
+ #商品詳細ページ
25
+ ```html
18
26
  <main>
19
-
27
+ <link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.css">
28
+ <link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick-theme.css">
29
+ <script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>
30
+ <div class="p-product">
31
+ <!-- パンくずリスト -->
32
+ <ul class="breadcrumb-wrapper">
20
- <form name="product_form" method="post" action="<{$cart_url}>">
33
+ <li class="breadcrumb01"><a href="<{$home_url}>">Home</a></li>
21
34
 
35
+ <li class="breadcrumb02"><a href="<{$bid_link}>"><{$bid_name}></a></li>
22
36
 
37
+ <li class="breadcrumb03"><{$product_name}></li>
23
38
 
24
-
39
+ </ul>
25
-
40
+ <!-- //パンくずリスト -->
26
-
41
+ <{if $product.id != ""}>
27
- <div class="thirdlayer_section01 article">
42
+ <div class="p-product u-container thirdlayer_section01 article">
43
+ <form name="product_form" method="post" action="<{$cart_url}>">
28
- <div class="left-side">
44
+ <div class="p-product-main">
29
- <!-- 商品画像 -->
45
+ <!-- 商品画像 -->
30
46
  <div class="p-product-img">
31
47
  <div class="p-product-img__main js-images-slider">
32
- <div class="p-product-img__main-item">
48
+ <div class="p-product-img__main-item basic">
33
49
  <{if $product.img_url != ""}>
34
50
  <img src="<{$product.img_url}>" alt="<{$productlist[num].name|escape:'html'}>" />
35
51
  <{else}>
@@ -39,7 +55,7 @@
39
55
  <{if $otherimg_num != 0}>
40
56
  <{section name=num loop=$otherimg}>
41
57
  <{if $otherimg[num].url != ""}>
42
- <div class="p-product-img__main-item">
58
+ <div class="p-product-img__main-item align">
43
59
  <img src="<{$otherimg[num].url}>" alt="<{$productlist[num].name|escape:'html'}>" />
44
60
  </div>
45
61
  <{/if}>
@@ -72,265 +88,43 @@
72
88
  <{/if}>
73
89
  </div>
74
90
  <!-- // 商品画像 -->
91
+
75
92
 
93
+ <script
94
+ src="https://code.jquery.com/jquery-3.6.0.min.js"
95
+ integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
96
+ crossorigin="anonymous"></script>
97
+ <script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>
76
98
 
99
+ <script>
100
+ $('.main-image').on('init', function(event, slick) {
101
+ if(slick.slideCount <= 6) {
102
+ $('.product-image-sub').css('padding-left','0');
103
+ $('.product-image-sub').css('padding-right','0');
104
+ }
105
+ })
106
+ .slick({
107
+ arrows: false,
108
+ asNavFor: '.thumb',
109
+ slidesToShow: 1,
110
+ });
111
+ $('.thumb').slick({
112
+ 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>',
113
+ 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>',
114
+ asNavFor: '.main-image',
115
+ arrows: true,
116
+ slidesToShow: 6,
117
+ slidesToScroll: 1,
118
+ focusOnSelect: true,
119
+ });
77
120
 
121
+ </script>
78
122
 
79
-
80
-
81
-
82
123
  </div>
83
-
84
- </div>
124
+
85
- </form>
86
-
87
-
88
-
89
- </main>
125
+ </main>
90
-
91
-
92
-
93
126
  ```
94
-
95
-
96
127
  ```css
97
-
98
-
99
- /*商品詳細ページ*/
100
- .thirdlayer_section01{
101
- width:1000px;
102
- margin:60px auto 100px auto;
103
- display: flex;
104
- flex-direction: row;
105
-
106
- clear: both;
107
- }
108
- .left-side{
109
- width:500px;
110
- display: flex;
111
- flex-direction: row;
112
- flex-wrap:wrap;
113
- align-content: flex-start;
114
- position:relative;
115
-
116
- }
117
- .details{
118
- margin-left:60px;
119
- width:440px;
120
- position: relative;
121
- }
122
- .product-title2{
123
- font-size:19px;
124
- font-weight: 100;
125
- font-style: normal;
126
- font-family:"Lato","sans-serif","ryo-gothic-plusn","Yu Gothic medium","YuGothic", "Hiragino Sans", "Meiryo";
127
- }
128
-
129
-
130
- .product-title2-jp{
131
- font-size:18px;
132
- font-family:"Lato","sans-serif","ryo-gothic-plusn","Yu Gothic medium","YuGothic", "Hiragino Sans", "Meiryo";
133
- font-style: normal;
134
- font-weight: 100;
135
-
136
-
137
- }
138
-
139
- .product-title2-price{
140
- font-size:22px;
141
- float: right;
142
- line-height: 1;
143
- display: inline-block;
144
- font-family:"Josefin Slab","sans-serif","ryo-gothic-plusn","Yu Gothic medium","YuGothic", "Hiragino Sans", "Meiryo";
145
- margin-top:40px;
146
- font-weight:500;
147
-
148
-
149
-
150
- }
151
- .product-title2-tax{
152
- font-size:14px;
153
- display: inline-block;
154
- font-family:"Lato","sans-serif","ryo-gothic-plusn","Yu Gothic medium","YuGothic", "Hiragino Sans", "Meiryo";
155
-
156
-
157
-
158
-
159
- }
160
- .product-title2-soldout{
161
- display: block;
162
- width: 100px;
163
- background-color: #E65959;
164
- font-size:15px;
165
- color: #fff;
166
- padding-top:4px;
167
- padding-bottom:4px;
168
- margin-top:8px;
169
- text-align: center;
170
- font-family:"Lato","sans-serif";
171
- font-weight: 400;
172
-
173
- }
174
- .reservation{
175
- display: block;
176
- width: 140px;
177
- background-color: #fff;
178
- font-size:16px;
179
- color: #E65959;
180
- padding-top:4px;
181
- padding-bottom:4px;
182
- margin-top:8px;
183
- text-align: center;
184
- font-weight: 400;
185
- box-sizing: border-box;
186
- border:double 3px #E65959;
187
-
188
- }
189
- .order_received{
190
- display: block;
191
- border:solid 6px #efefef;
192
- text-align: center;
193
- margin-top:100px;
194
- font-family:"Lato","sans-serif";
195
- font-weight: 400;
196
- font-size:18px;
197
- padding:12px 0;
198
- box-sizing: border-box;
199
- }
200
- .order_received span{
201
- font-size:15px;
202
-
203
- }
204
-
205
- .details-text{
206
- clear: both;
207
- font-size:18px;
208
- font-family:"Lato","sans-serif","ryo-gothic-plusn","Yu Gothic medium","YuGothic", "Hiragino Sans", "Meiryo";
209
- text-align: justify;
210
- font-weight: 100;
211
- line-height: 1.7em;
212
- margin-top:84px;
213
-
214
- }
215
-
216
-
217
-
218
- /******************************/
219
- /* Product */
220
- /******************************/
221
- .p-product {
222
- margin-bottom: 90px;
223
- }
224
- /* form */
225
- .p-product select {
226
- box-sizing: border-box;
227
- padding: 5px;
228
- height: 40px;
229
- border: 1px solid #bfbfbf;
230
- font-size: 16px;
231
- }
232
- .p-product input[type=text] {
233
- box-sizing: border-box;
234
- padding: 5px;
235
- height: 40px;
236
- border: 1px solid #bfbfbf;
237
- font-size: 16px;
238
- }
239
- .p-product-main {
240
- display: flex;
241
- flex-wrap: wrap;
242
- justify-content: space-between;
243
- }
244
-
245
- .p-product-img {
246
- width: 500px;
247
- }
248
-
249
-
250
- .p-product-img__main {
251
- text-align: center;
252
- }
253
-
254
-
255
- .p-product-img__main-item {
256
- position: relative;
257
- text-align: center;
258
- }
259
-
260
- .p-product-img__main-item:before {
261
- content: "";
262
- display: block;
263
- padding-top: 100%;
264
- }
265
- .p-product-img__main-item a {
266
- display: block;
267
- position: absolute;
268
- top: 0;
269
- left: 0;
270
- width: 100%;
271
- height: 100%;
272
- }
273
- .p-product-img__main-item img {
274
- display: inline-block;
275
- position: absolute;
276
- top: 0;
277
- right: 0;
278
- bottom: 0;
279
- left: 0;
280
- margin: auto;
281
- width: auto !important;
282
- max-width: 100%;
283
- max-height: 100%;
284
- text-align: center;
285
- }
286
- .p-product-thumb-list {
287
- display: flex;
288
- flex-wrap: wrap;
289
- /* margin-left: -4px;
290
- margin-right: -4px;*/
291
- margin-top: 8px;
292
- }
293
-
294
- .p-product-thumb-list__item {
295
- box-sizing: border-box;
296
- margin-bottom: 8px;
297
- /* padding-left: 4px;
298
- padding-right: 4px;*/
299
- width: 125px;
300
- transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
301
- }
302
-
303
-
304
- .p-product-thumb-list__item:hover, .p-product-thumb-list__item.is-current {
305
- opacity: 0.7;
306
- cursor: pointer;
307
- }
308
-
309
- .p-product-thumb-list__img {
310
- /* overflow用 */
311
- position: relative;
312
- text-align: center;
313
- }
314
-
315
-
316
- .p-product-thumb-list__img:before {
317
- content: "";
318
- display: block;
319
- padding-top: 100%;
320
- }
321
- .p-product-thumb-list__img img {
322
- display: inline-block;
323
- position: absolute;
324
- top: 0;
325
- right: 0;
326
- bottom: 0;
327
- left: 0;
328
- margin: auto;
329
- width: auto !important;
330
- max-width: 100%;
331
- max-height: 100%;
332
- text-align: center;
333
- }
334
128
  /* 商品画像 slider */
335
129
  .p-product-img__main .slick-track {
336
130
  margin-left: 0;
@@ -374,73 +168,4 @@
374
168
  transform: rotate(135deg);
375
169
  }
376
170
 
377
- /***** 商品情報 *****/
378
- .p-product-info {
379
- width: 410px;
380
- }
381
-
382
- .p-product-info__ttl {
383
- margin: 0;
384
- font-size: 24px;
385
- font-weight: normal;
386
- }
387
-
388
- .p-product-info__ttl img {
389
- vertical-align: middle;
390
- }
391
-
392
- .p-product-info__id {
393
- margin: 0;
394
- }
395
-
396
- .p-product-price {
397
- margin-top: 20px;
398
- margin-bottom: 20px;
399
- }
400
- .p-product-price__sell {
401
- font-size: 18px;
402
- }
403
- .p-product-price__normal {
404
- font-size: 14px;
405
- }
406
- -product-price__list-price {
407
- font-size: 14px;
408
- }
409
-
410
- /* オプション table */
411
- .p-product-option-tbl {
412
- margin-top: 30px;
413
- margin-bottom: 30px;
414
- overflow-x: auto;
415
- }
416
- .p-product-option-tbl table {
417
- margin-bottom: 0;
418
- border-left: 0;
419
- border-right: 0;
420
- width: 100%;
421
- }
422
- .p-product-option-tbl table div {
423
- display: inline-block !important;
424
- }
425
- .p-product-option-tbl th {
426
- min-width: 100px;
427
- }
428
- .p-product-option-tbl th, .p-product-option-tbl td {
429
- padding: 12px 5px;
430
- border-top: 1px solid #dddddd;
431
- border-bottom: 1px solid #dddddd;
432
- border-left: 0;
433
- text-align: center;
434
- }
435
- .p-product-option-tbl label {
436
- display: inline-block !important;
437
- margin-left: 5px;
438
- margin-bottom: 0;
439
- }
440
- .p-product-option-tbl input {
441
- margin-top: 0;
442
- }
443
-
444
-
445
- ```
171
+ ```
446
- ![イメージ説明](7156e0442b9e1229a599b328892feddf.png)