Q&A
slickを使ってフルスクリーンのスライドを作ろうとしています。
発生している問題・エラーメッセージ
https://125naroom.com/web/3198
（10. 画面幅いっぱいに並べてスライド（企業サイトでよく見かけますね）部分）
こちらのサイトを参考に作成しているのですが、
画像が縦に並び、カルーセル等も付かずスライダーになりません。
何が原因なのか、ヒントをいただけたら幸いです。
chromeのコンソールではエラーは出ていません。
該当のソースコード
HTML
<html> <head> <!--省略--> <link href="../css/header.css" rel="stylesheet" type="text/css" media="all" /> <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"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></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><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>
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件
0
ベストアンサー
こんばんは。
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
総合スコア36115
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/25 03:31
2020/09/25 03:36
2020/09/25 03:51
2020/09/25 06:53
2020/09/25 10:21
2020/09/25 11:48
2020/09/26 04:23 編集
2020/09/26 04:26
2020/09/26 08:15
2020/09/26 11:28
2020/09/27 06:40
2020/09/27 09:01