slickの２枚目が表示されない
Q&A
Closed
解決したいこと
slickを使ったスライドショーで2枚目以降が表示されない
発生している問題・エラー
DevTools failed to load source map: Could not load content for https://www.gstatic.com/mapspro/_/ss/k=mapspro.gmeviewer.zwrxQLokbTo.L.W.O/d=0/unsupportedbrowser.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
js?v=3.51&client=google-maps-pro&language=ja®ion=JP&libraries=places,visualization,geometry,search:252 Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
該当するエラーコードが見つからなからなかったので一応いま出ているエラーコードを貼らせていただきましした。
該当するソースコード
-------------------------html-------------------------
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<div class="slider">
<div>
<img src="https://github.com/matsuyas0120/turven.Site/blob/main/head.jpg?raw=true" alt="スライド画像01"
class="large-img active">
</div>
<div>
<img src="https://github.com/matsuyas0120/turven.Site/blob/main/head2.jpg?raw=true" class="large-img"
alt="スライド画像02">
</div>
<div>
<img src="https://github.com/matsuyas0120/turven.Site/blob/main/head3.jpg?raw=true" class="large-img"
alt="スライド画像03">
</div>
<div>
<img src="https://github.com/matsuyas0120/turven.Site/blob/main/head4.jpg?raw=true" class="large-img"
alt="スライド画像04">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slick({
arrows: false,
dots: true,
autoplay: true
});
});
</script>
linkタグはheadタグの中に、scriptタグはbodyの閉じタグの直前に書いてあります。
自分で試したこと
自分で調べてみてslick.css,slick.js,jqueyがちゃんと読み込めているかなどを確認してみましたが２枚目以降が反映されない原因がわかりませんでした。
ご教授いただけますと幸いです。
0 likes
