slickをCDNで実装したいが、画像が縦に並んでしまう。

slickを使ってフルスクリーンのスライドを作ろうとしています。

発生している問題・エラーメッセージ

https://125naroom.com/web/3198
（10. 画面幅いっぱいに並べてスライド（企業サイトでよく見かけますね）部分）

こちらのサイトを参考に作成しているのですが、
画像が縦に並び、カルーセル等も付かずスライダーになりません。
何が原因なのか、ヒントをいただけたら幸いです。

chromeのコンソールではエラーは出ていません。

該当のソースコード

HTML

<script type="text/javascript">
    $(document).on('ready', function() {
        $(".full-screen").slick({
            centerMode: true,
            centerPadding: '5%',
            dots: true,
            autoplay: true,
            autoplaySpeed: 3000,
            speed: 1000,
            infinite: true,
        });
    });

</script>

</head> <body> <div class="contents"> <div class="sliderArea"> <div class="full-screen slider"> <div><a href="" target="_top"><img src="aa.jpg" border="0" width="800" /></a></div> <div><a href="" target="_top"><img src="aa.jpg" border="0" width="800" /></a></div> <div><a href="" target="_top"><img src="aa.jpg" border="0" width="800" /></a></div> <div><a href="" target="_top"><img src="aa.jpg" border="0" width="800" /></a></div> </div></div> </div> </body> </html>

CSS(header.css)

{
font-size: 12px;
color: #666666;
padding: 0;
margin: 0;
border: 1;
letter-spacing: 2px;

}

body {
width: 100%;
margin-right: auto;
margin-left: auto;
text-align: center;
}

.contents {
width: auto;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
text-align: center;
}

/スライダー/

.sliderArea {
max-width: 100%;
margin: 0 auto;
padding: 0 25px;
}

.sliderArea {
max-width: 800px;
}

.slick-slide {
margin: 0 5px;
}

.slick-slide img {
width: 100%;
height: auto;
}

.slick-prev,
.slick-next {
z-index: 1;
}

.slick-prev:before,
.slick-next:before {
color: #000;
}

.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}

.slick-active {
opacity: 1;
}

.slick-current {
opacity: 1;
}

.thumb {
margin: 20px 0 0;
}

.thumb .slick-slide {
cursor: pointer;
}

.thumb .slick-slide:hover {
opacity: .7;
}

/====================================================================
.full-screen
====================================================================/

.full-screen .slick-list {
overflow: visible;
}

.full-screen.slider {
max-width: 800px;
margin: 0 auto;
}

試したこと

CDNではない方法も試しましたが、実装できませんでした。
根本的に間違っているのだと思うのですが。。

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

回答1件

ベストアンサー

こんばんは。

js
1<!-- jQuery library (served from Google) -->
2<!-- 削除 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->

なお、body要素やhead要素はちゃんと使ったほうがいいと思います。
老婆心ながら失礼しました。

投稿2020/09/24 15:31

Lhankor_Mhy

総合スコア36960

ma-ma-ma-ma

2020/09/25 03:31

ご回答ありがとうございます。削除してみましたが、変わらないようです。。スクリプトの中身はこれで問題ないでしょうか？アドバイスありがとうございます、省き過ぎてしまいましたね。head等編集しました。

Lhankor_Mhy

2020/09/25 03:36

そうでしたか。当方の環境では、その削除で動作しました。ご提示いただいていない部分のコードに原因があるのかもしれません。

Lhankor_Mhy

2020/09/25 03:51

ご提示のコードから、回答の修正をしたサンプルです。 https://jsfiddle.net/Lhankor_Mhy/zenjd2tm/

ma-ma-ma-ma

2020/09/25 06:53

スタイルシート等編集しました。サンプルまでありがとうございます！確かに動いていますね。

ma-ma-ma-ma

2020/09/25 10:21

メタタグやCSSなどで、何か動作を阻害するものがあるのでしょうか？他に参照しているCSSを消して確認などしているのですが、どこが原因か未だ掴めておりません。

Lhankor_Mhy

2020/09/25 11:48

ご質問のコードが動作しなかった理由は２つあります。・jQuery のバージョンが違う・jQuery を複数読み込んでいるですので、原因は JavaScript にあるのではないでしょうか

ma-ma-ma-ma

2020/09/26 04:23 編集

ありがとうございます、slickのCDN部分を見て、バージョンが違ったようなので修正しました。ですがまだ動きません。。ちなみに、<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> この部分はslick特有の記述ではなく、jqueryの他のプラグインを使う際も共有できるものという認識で合っていますでしょうか？色々聞いてしまってすみません；

Lhankor_Mhy

2020/09/26 04:26

他のプラグインで、jQueryのバージョンが合うのであれば、そうですね。

ma-ma-ma-ma

2020/09/26 08:15

ありがとうございます。最初のご回答で複数のjQueryは削除させていただいたので、バージョンだと思うのですが、 https://kenwheeler.github.io/slick/ 公式サイトのCDN部分をコピペすれば間違いないですよね？これで動かないのでもう少し調べてみます。

Lhankor_Mhy

2020/09/26 11:28

1.7+ と書いてありますからね。動作すると思います。といいますか、slick は何度か使ったことありますが、3.0系でも動作したと思います。 jQuery のバージョンが対応していないのは、ma-ma-ma-maさんが書いたコードの方です。 > There is also $(document).on( "ready", handler ), deprecated as of jQuery 1.8 and removed in jQuery 3.0. https://api.jquery.com/ready/#ready-handler

ma-ma-ma-ma

2020/09/27 06:40

動きました！！ありがとうございます。。！色々と参考にして試すうちに$(document).on( "ready"を消したバージョンで保存してしまっていました。 slickのCDNを正しくして改めていただいたサンプルをコピーして確認させていただいたところ、ちゃんと動きました。初めてteratailで質問したのですが、丁寧にお答えいただき本当に感謝しております。

Lhankor_Mhy

2020/09/27 09:01

ご解決されて何よりでした。

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