73553


表題の件について、モニターの最上部にてフルスクリーンでの複数画像のスライドを行いたいのですが、  
jsの読み込みが原因なのか、複数画像の相対パスの表示方法が違うのか、うまくできない状況です。

以下に、うまく表示されない原因ではないかと思われる箇所を3点表記しました。

* * *

  1. 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>`を入力しました。

  2. 「jQuery.BgSwitcher」をダウンロードし、jquery.bgswitcher.jsファイルを  
htmlの /body 直前に`<script src="js/jquery.bgswitcher.js"></script>`として表記しました。

  3. 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

[code]

    <!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>
    
    
[/code]

css

[code]

    @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;
    }
    
[/code]

js

[code]

    $(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>
    });
    
[/code]


CC BY-SA 4.0
2021-01-22T01:52:03.007
73483
2021-01-25T00:58:45.177
2021-01-22T05:03:07.267
43622
43622
question
html jquery css adobe-brackets
bracketsでjqueryによるbgSwitcherプラグインを使用したいのですが、うまく適用できません


そもそものJavascriptの記述の仕方に勘違いをされているようです。  
外部リソースとしてJavascriptを呼び出す場合はscriptタグは必要ないです。  
そのままJavascriptを記述してください

[code]

        jQuery(function($) {
            $('.bg-slider').bgSwitcher({
                images: ['../images/index/img01.jpg','../images/index/img02.jpg','../images/index/img03.jpg'], // 背景画像
            });
        });
    
[/code]

またその記述の仕方ですと以下のようにJavascriptのエラーが発生するはずです。

[code]

    $(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>
    });
[/code]

もっともシンプルな確認の仕方はブラウザでF12でコンソールを開いて確認できます。  
そのほかの方法もいろいろなサイトで紹介されています。  
まずはJavascirptのデバック方法を学んでもらってエラーがない状態になるようになることを目指しましょう。


CC BY-SA 4.0
2021-01-25T00:58:45.177
73553
2021-01-25T00:58:45.177
22665
73483
answer