質問編集履歴

1

ソースコード表記を見やすく変更しました

2022/12/25 09:20

投稿

kuro333
kuro333

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,3 @@
1
- ### 前提
2
-
3
1
  Bracketsにてhtmlページ作成を行っているのですが、Slickにてスライドショーを使用しようとしたところ、メイン画像とサムネイルスライダーの間に、意図しない隙間が出来てしまうことが判明し、原因を探すためコードも最小限にしたのですが、それでも原因がわかりませんでした。
4
2
 
5
3
  Bracketsで作成、プレビューしたものは隙間が出来てしまうのですが(ネット上にアップロードしても同じでした)、同じhtmlコード、JSコードをcodepenで試したところ、そちらでは隙間ができません。
@@ -8,8 +6,10 @@
8
6
 
9
7
  1枚めが空白が無い状態、2枚目が空白が出来てしまう状態(1枚目では表示されているNextボタンが画像外まで出てしまっています)です。
10
8
 
9
+
11
10
  ### 該当のソースコード
12
11
 
12
+ ```html
13
13
  <html lang="ja">
14
14
  <head>
15
15
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
@@ -40,9 +40,9 @@
40
40
  <script src="../js/6-2-5.js"></script>
41
41
  </body>
42
42
  </html>
43
+ ```
43
44
 
44
- 以下がJSファイル「6-2-5.js
45
+ ```javascript
45
-
46
46
  //上部画像の設定
47
47
  $('.gallery').slick({
48
48
 
@@ -52,8 +52,10 @@
52
52
  $('.choice-btn').slick({
53
53
 
54
54
  });
55
+ ```
55
56
 
56
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-25/c64c054b-0024-4ad8-9a8b-5ccf58876ed8.jpeg)
57
+ ### 参考画像
57
-
58
+ 1枚目
58
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-25/a2ce5bbb-b0e0-4b1d-b84b-72f9755f046e.jpeg)
59
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-25/915cec14-2607-47cd-80db-c8e79b75cd4d.jpeg)
59
-
60
+ 2枚目
61
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-25/1482859f-5cfa-4fb4-9f27-f52141581fd4.jpeg)