JavaScriptでカルーセル画像の表示ができない

実現したいこと

カルーセルで画像を流れるように表示したいが、画像表示されない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6  <title>10Prrisume ポートフォリオ</title>
7  <link rel="preconnect" href="https://fonts.gstatic.com">
8  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
9  <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
10  <link href="css/ress.css" media="all" rel="stylesheet" type="text/css" />
11  <link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
12     <!-- slickの読み込み -->
13     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
14     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
15 
16</head>
17
18<body>
19  <div class="wrapper">
20
21    <!-- header -->
22    <header class="header ">
23      <div class="container">
24        <h1 class="header-logo">
25          <a href="#">10Prisume Works</a>
26        </h1>
27        <nav class="gnav">
28          <ul class="gnav-list">
29            <li class="gnav-item"><a href="#works">WORKS</a></li>
30            <li class="gnav-item"><a href="#skill">SKILL</a></li>
31            <li class="gnav-item"><a href="#about">ABOUT</a></li>
32            <li class="gnav-item"><a href="#contact">CONTACT</a></li>
33          </ul>
34        </nav>
35      </div>
36    </header>
37    <!-- /header -->
38
39    <main class="content">
40
41      <!-- mv -->
42      <div class="mv">
43        <div class="mv-container">
44          <!-- メインビジュアル -->
45          <section id="carousel-section">
46            <div class="carousel">
47              <div>
48                <img class="carouselImg" src="img/DESIGNCODING.png">
49              </div>
50              <div>
51                <img class="carouselImg" src="img/TOP2.png">
52              </div>
53              <div>
54                <img class="carouselImg" src="img/TOP3.png">
55              </div>
56            </div>
57          </section>
58          
59        </div>
60      </div>
61      <!-- /mv -->
62
63      <!-- works -->
64      <section class="works section" id="works">
65        <div class="container">
66          <h2 class="title">WORKS</h2>
67
68
69          <!-- 上段画像 -->
70          <div class="works-list">
71            <a class="works-item" href="works-1.html">
72              <div class="works-img"><img src="img/works/html1.png" alt="html1" /></div>
73              <p class="works-name">コーポレートサイト</p>
74              <p class="works-info">HTML/CSS/JavaScript/jQuery/レスポンシブ対応</p>
75            </a>
76            <a class="works-item" href="works-2.html">
77              <div class="works-img"><img src="img/works/html2.png" alt="html2" /></div>
78              <p class="works-name">プロフィールサイト</p>
79              <p class="works-info">HTML/CSS</p>
80            </a>
81            <a class="works-item" href="works-3.html">
82              <div class="works-img"><img src="img/works/wordpress1.png" alt="WordPress" /></div>
83              <p class="works-name">美容室のHP</p>
84              <p class="works-info">WordPress</p>
85            </a>
86
87
88            <!-- 下段画像 -->
89
90            <a class="works-item" href="works-4.html">
91              <div class="works-img"><img src="img/works/photoshop.png" alt="Photoshop" /></div>
92              <p class="works-name">ITスクールのバナー</p>
93              <p class="works-info">Photoshop</p>
94            </a>
95            <a class="works-item" href="works-5.html">
96              <div class="works-img"><img src="img/works/xd.png" alt="AdobeXD" /></div>
97              <p class="works-name">ITスクールのLP</p>
98              <p class="works-info">AdobeXD</p>
99            </a>
100            <a class="works-item" href="works-6.html">
101              <div class="works-img"><img src="img/works/wordpress2.png" alt="WordPress2" /></div>
102              <p class="works-name">大学のHP</p>
103              <p class="works-info">WordPress/PHP</p>
104            </a>
105          </div>
106        </div>
107      </section>
108      <!-- /works -->
109
110      <!-- skill -->
111      <section class="skill section" id="skill">
112        <div class="container">
113          <h2 class="title">SKILL</h2>
114          <div class="skill-list">
115            <div class="skill-item">
116              <p class="skill-img"><img src="img/skills/html.png" alt="html"></p>
117              <div class="skill-body">
118                <h3 class="skill-name">HTML/CSS</h3>
119                <p class="skill-text">
120                  スマホで見ても表示崩れのないレスポンシブ対応も可能です。</p>
121              </div>
122            </div>
123            <div class="skill-item">
124              <p class="skill-img"><img src="img/skills/wordpress.png" alt="wordpress"></p>
125              <div class="skill-body">
126                <h3 class="skill-name">WordPress</h3>
127                <p class="skill-text">
128                  WordPress製の店舗HP・企業HP・メディアサイトなど、Webサイトを0から構築することが可能です。</p>
129              </div>
130            </div>
131            <div class="skill-item">
132              <p class="skill-img"><img src="img/skills/js.png" alt="javascript"></p>
133              <div class="skill-body">
134                <h3 class="skill-name">JavaScript</h3>
135                <p class="skill-text">
136                  お問い合わせフォームや自動スクロールなど動きのあるWebサイトを作る事が可能です。</p>
137              </div>
138            </div>
139            <div class="skill-item">
140              <p class="skill-img"><img src="img/skills/photoshop.png" alt="photoshop"></p>
141              <div class="skill-body">
142                <h3 class="skill-name">Adobe Photoshop</h3>
143                <p class="skill-text">
144                  Webサイトに必要不可欠なクリエイティブバナーを作ることが可能です。</p>
145              </div>
146            </div>
147            <div class="skill-item">
148              <p class="skill-img"><img src="img/skills/jquery.png" alt="jquery"></p>
149              <div class="skill-body">
150                <h3 class="skill-name">jQuery</h3>
151                <p class="skill-text">
152                  Webサイトにフェードイン・フェードアウトなどリッチな動きをつけることが可能です。</p>
153              </div>
154            </div>
155            <div class="skill-item">
156              <p class="skill-img"><img src="img/skills/canva-1.svg" alt="adobexd"></p>
157              <div class="skill-body">
158                <h3 class="skill-name">CANVA</h3>
159                <p class="skill-text">
160                  Webサイトのバナーや写真編集をすることが可能です。</p>
161              </div>
162            </div>
163          </div>
164        </div>
165      </section>
166      <!-- /skill -->
167
168      <!-- about -->
169      <section class="about section" id="about">
170        <div class="container">
171          <h2 class="title">ABOUT</h2>
172          <div class="profile">
173            <p class="profile-img">
174              <img src="img/PROFILE.jpg" alt="about">
175            </p>
176            <div class="profile-body">
177              <p>
178                <h3>Kaji</h3>
179              </p>
180              <p>
181                大阪府在住。フリーランスとしてWebデザイン・制作をしております。専門学校卒業後、アパレル会社で勤務。2019年より5年間人材派遣業界で営業職として務めておりました。予てより趣味でしていたWebサイト制作を2024年より本業にしました。Web制作におけるデザイン、コーディング、スマートフォンサイト対応、WordPressなどが得意分野です。低予算でWebサイトをお作りしますので、お気軽にお問い合わせください。
182              </p>
183              
184            </div>
185          </div>
186        </div>
187      </section>
188      <!-- /about -->
189
190      <!-- contact -->
191      <section class="contact section" id="contact">
192        <div class="container">
193          <h2 class="title">CONTACT</h2>
194          <p class="lead">
195            お問い合わせは、<br class="sp-only">メールまたはSNSにてお願いいたします。
196          </p>
197          <div class="contact-list">
198            <a href="http://instagram.com/10Prisume" target="_blank">
199              <img src="img/icon_instagram.gif" alt="Instagram">
200            </a>
201            <a href="http://facebook.com/" target="_blank">
202              <img src="img/icon_facebook.gif" alt="Facebook">
203            </a>
204          </div>
205        </div>
206      </section>
207      <!-- /contact -->
208      <div class="page-top" id="js-page-top">
209        <span class="material-icons-outlined">expand_less</span>
210      </div>
211    </main>
212
213    <!-- footer -->
214    <footer class="footer">
215      <div class="copyright">&copy;10Prisume Works</div>
216    </footer>
217    <!-- /footer -->
218
219  </div>
220  
221  <!-- jQueryを先に読み込む -->
222<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
223integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
224crossorigin="anonymous"></script>
225<!-- slickの読み込み -->
226<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
227
228  <script type='text/javascript' src="js/script.js"></script>
229    
230
231  </body>
232  </html>
233
234</body>
235</html>
236

・slickを読み込み忘れていないか（jsひとつとCSSふたつ）
→確認済
・jQueryを読み込み忘れていないか
→確認済
・画像のパスが間違っていないか
→確認済

Lhankor_Mhy

2024/10/22 15:35

ご提示のコードを試してみましたが、特に問題はありませんでした。以下のことを確認してみてください。・slickを読み込み忘れていないか（jsひとつとCSSふたつ）・jQueryを読み込み忘れていないか・画像のパスが間違っていないか

Kaji1962

2024/10/22 16:04

ご回答ありがとうございます。 jqueryのコード記載で画像は表示できました。がカルーセルではなく縦並びになってしまいました。。。

Lhankor_Mhy

2024/10/23 00:09

こちらについてはどうですか？・slickを読み込み忘れていないか（jsひとつとCSSふたつ）

Kaji1962

2024/10/23 03:52

headに ``` <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> ``` bodyの閉じタグ前に ``` <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> ``` の記載しております。あっておりますでしょうか？

Kaji1962

2024/10/23 04:22

```JavaScript $(function () { //ページ内スクロール var navHeight = $(".header").outerHeight(); $('a[href^="#"]').on("click", function () { var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? "html" : href); var position = target.offset().top - navHeight; $("html, body").animate({ scrollTop: position, }, 300, "swing"); return false; }); //ページトップ $("#js-page-top").on("click", function () { $("body,html").animate({ scrollTop: 0, }, 300); return false; }); $('.carousel').slick({ autoplay: true, dots: true, infinite: true, autoplaySpeed: 3000, arrows: false, }); }); ``` 本文にHTML記載上記がJavaScriptになります。未熟ですみません！

juner

2024/10/23 04:41

それらはこのコメント欄で書かずに質問本文に記載した方がシンタックスハイライトも利いて見やすくなりますしインデントも利く様になります。

Lhankor_Mhy

2024/10/23 05:53 編集

ご提示のコードを試してみましたが、問題なくカルーセルは動作しました。ご提示いただいていない部分のコード（たとえばCSS）などに原因があるのかもしれません。問題が再現するかどうかを一度確認してから、コードをご提示いただくと、余分なやり取りに時間がかからなくてスムーズに解決するかもしれませんね。

Lhankor_Mhy

2024/10/23 05:55

あと、一応念のため、slick-theme.cssをslick.cssよりも後に記載するのが正しいです。

Kaji1962

2024/10/23 06:04

本文にJavaScriptまで記載すると文字数オーバーの為コメントに記載しました。 CSSのwidth変更で画像サイズも調整でき、カルーセル表示もできました。ありがとうございます！

Lhankor_Mhy

2024/10/23 08:10

ご解決されて何よりです。お手数ですが、自己解決の処理をお願いします。

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

回答2件

自己解決

CSSのwidthを修正することで画面幅におさまり解決しました。
.mv-container {
position: relative;
padding: 0 20px;
width: 100%;
}

投稿2024/10/23 08:49

Kaji1962

総合スコア3

ポイント

jQueryを呼んでる
カルーセルライブラリを呼んでる
スタイルシートを呼んでる

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
4<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
5<script>
6$(function(){
7  $('.carousel').slick({
8  autoplay:true,
9  dots:true,
10  infinite:true,
11  autoplaySpeed:3000,
12  arrow:false,
13  });
14});
15</script>
16<section id="carousel-section">
17<div class="carousel">
18<div><img src="https://placehold.jp/ff0000/00000/100x100.png?text=1"></div>
19<div><img src="https://placehold.jp/00ff00/00000/100x100.png?text=2"></div>
20<div><img src="https://placehold.jp/0000ff/00000/100x100.png?text=3"></div>
21</div>
22</section>