表題の件について、モニターの最上部にてフルスクリーンでの複数画像のスライドを行いたいのですが、
jsの読み込みが原因なのか、複数画像の相対パスの表示方法が違うのか、うまくできない状況です。
以下に、うまく表示されない原因ではないかと思われる箇所を3点表記しました。
js読み込みとして、htmlのheadに
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
を入力し、
/body 直前に<script src="js/script.js"></script>
を入力しました。「jQuery.BgSwitcher」をダウンロードし、jquery.bgswitcher.jsファイルを
htmlの /body 直前に<script src="js/jquery.bgswitcher.js"></script>
として表記しました。jsコードの背景画像に記入した表示させたい画像の相対パスについて、
images: ['img/bg1.jpg','img/bg2.jpg','img/bg3.jpg'],と参考にしたサイトに記載のダミー画像をcssのbackground-imageでの相対パスでの表示のように、
images: ['../images/index/img01.jpg','../images/index/img02.jpg','../images/index/img03.jpg']に変更しましたが、モニターでうまく表示がされません。
下部にhtml, css, jqueryそれぞれのコードを添付いたしました。
jsの読み込みを変更させたり、色々と試してみたのですが、モニターで画像の表示が確認できません。
jsなどのコードの書き方は、学習サービスの「プロゲート」を参考にして書いております。
大変お手数ですが、解決策を教えていただける方がいらっしゃいましたら
よろしくお願いいたします。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトルタイトルタイトル</title>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="bg-slider">
<h1 class="bg-slider__title">BGSWITCHER DEMO PAGE</h1>
</div>
<script src="js/script.js"></script>
<script src="js/jquery.bgswitcher.js"></script>
</body>
</html>
css
@charset "UTF-8";
body {
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Roboto', sans-serif;
}
a {
text-decoration: none;
}
.container {
width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.bg-slider {
width: 100vw;
height: 100vh;
background-position:center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.bg-slider__title{
color: #fff;
font-size: 48px;
line-height: 1.5;
font-weight: bold;
text-align:center;
text-shadow: 1px 1px 1px #000;
}
js
$(function(){
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
$('.bg-slider').bgSwitcher({
images: ['../images/index/img01.jpg','../images/index/img02.jpg','../images/index/img03.jpg'], // 背景画像
});
});
</script>
});