

LPを制作しています。

swiperを利用してスライドショーを設置しようと思っています。  
ネットで調べて試してみましたが、動作しません。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <title>Document</title>
    </head>
    
    (中略)
    ～</footer>
    
        <script src="js/script.js"></script>
        <script>
            var mySwiper = new Swiper ('.swiper-container', {
              // 以下にオプションを設定
              loop: true,
              autoplay:{
                delay: 5000,
              },      
            });
        </script>  
    </body>
    </html>
[/code]

[code]

    .card-slider {
        display: flex;
        justify-content: space-between;
    }
    
    .slider {
        width: 322px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #DDDDDD;
        border-radius: 8px;
    }
    
    .slider img {
        width: 100%;
    }
    
    .slider-txt {
        padding-top: 18px;
        padding-left: 18px;
        padding-right: 17px;
        text-align: left;
        height: 196px;
        position: relative;
    }
    
    .slider-txt h3 {
        font-size: 16px;
        line-height: 24px;
        font-weight: bold;
    }
    
    .slider-txt p {
        bottom: 30px;
        position: absolute;
    }
[/code]

[code]

    <!-- スライダーのメインコンテナの div 要素 -->
    <div class="swiper-container">
    
    <!-- ラッパー(クラス名=slider)の（スライドを囲む） div 要素 -->
      <div class="card-slider">
    
    <!-- それぞれのスライドの div 要素（１） -->
         <div class="slider">
           <img src="img/digital-marketing-1433427_1280.png" alt="実績画像1">
           <div class="slider-txt">
              <h3>株式会社サンプル採用サイトのコーディングを行いました！</h3>
              <p></p>
           </div>
         </div>
    
    <!-- それぞれのスライドの div 要素（２） -->
         <div class="slider">
           <img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt="実績画像2">
           <div class="slider-txt">
             <h3>コーディングカンファレンスのイベント LPの制作を行いました！</h3>
             <p>採用技術：jQuery,WordPress<br>実装期間：4週間<br>担当コーダー：石井</p>
           </div>
          </div>
    
    <!-- それぞれのスライドの div 要素（３） -->
          <div class="slider">
            <img src="img/digital-marketing-1433427_1280.png" alt="実績画像3">
            <div class="slider-txt">
              <h3>株式会社サンプル様採用サイトのコーデ ィングを行いました！</h3>
              <p>採用技術：jQuery,Bootstrap4<br>実装期間：2週間<br>担当コーダー：石井</p>
            </div>
           </div>
    
    <!-- それぞれのスライドの div 要素（４） -->
           <div class="slider">
             <img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt="実績画像4">
               <div class="slider-txt">
                 <h3>株式会社サンプル様通販サイトのコーデ ィングを行いました！</h3>
                 <p>採用技術：jQuery,Bootstrap4<br>実装期間：6週間<br>担当コーダー：石井</p>
               </div>
            </div>
    
    <!-- それぞれのスライドの div 要素（５） -->                     
            <div class="slider">
              <img src="img/digital-marketing-1433427_1280.png" alt="実績画像5">
                 <div class="slider-txt">
                    <h3>株式会社サンプル採用サイトのコーディ ングを行いました！</h3>
                    <p>採用技術：jQuery,Bootstrap4<br>実装期間：2週間<br>担当コーダー：石井</p>
                  </div>
              </div>
    
        </div><!-- ラッパー(クラス名=slider)の（スライドを囲む） div 要素 -->
       </div><!-- スライダーのメインコンテナの div 要素 -->
[/code]

**エラーメッセージ:**

[code]

    autoplay.js:87 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
        at autoplay.js:87
        at Array.forEach (<anonymous>)
        at t.pause (autoplay.js:86)
        at t.onVisibilityChange (autoplay.js:95)
    (anonymous) @ autoplay.js:87
    pause @ autoplay.js:86
    onVisibilityChange @ autoplay.js:95
    
    utils.js:28 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
        at utils.js:28
        at T (utils.js:45)
        at t.getTranslate (getTranslate.js:15)
        at t.loopFix (loopFix.js:20)
        at autoplay.js:36
    
[/code]


CC BY-SA 4.0
2021-07-06T12:44:47.983
78011
2023-05-17T03:15:42.073
2021-07-06T15:12:41.123
3060
43659
question
javascript swiper
swiper が動作しません


## エラー内容

エラーの内容はHTML内のクラス名が適切でないので、指定のElementが取得できず（undefined)参照エラーになっている、というものです。

## Swiperの使用方法

[Swiperの公式ドキュメント](https://swiperjs.com/get-started)はご覧になっていますか？  
巷のブログを検索するよりずっと信頼性の高いドキュメントです。  
基本的には、公式ドキュメントのGetting Started 通りにHTMLを実装していけば問題なく動作します。  
[公式ドキュメントのHTML Layout](https://swiperjs.com/get-started#add-swiper-html-
layout)はこのように記載されています。

[code]

    <!-- Slider main container -->
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
    
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    
      <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>
    
[/code]

ここから、実際のスライドとなる`div.swiper-slide`要素の中身を記載していくだけです。  
他のタグやクラス名を変更してはいけません。（厳密には変更可能ですが、初心者向けのカスタマイズではないのでまずはテンプレート通りの実装で慣れてください）

## 補足

クラス名の付け方で察するに、slickと混同しているのではないかと思われます。  
slickとswiperは全く別物です。注意してください。

以下、クラス名を適切に変更したスニペットです。スタイルも若干いじっています。  

[code]

    var mySwiper = new Swiper ('.swiper-container', {
              // 以下にオプションを設定
              loop: true,
              autoplay:{
                delay: 5000,
              },      
            });
[/code]

[code]

    .card-slider {
        display: flex;
        justify-content: space-between;
    }
    
    .swiper-slide{
      width: 100%;
      background-color: #abe;
    }
    
    .slider-txt {
        padding-top: 18px;
        padding-left: 18px;
        padding-right: 17px;
        text-align: left;
        height: 196px;
        position: relative;
    }
    
    .slider-txt h3 {
        font-size: 16px;
        line-height: 24px;
        font-weight: bold;
    }
    
    .slider-txt p {
        bottom: 30px;
        position: absolute;
    }
[/code]

[code]

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <!-- スライダーのメインコンテナの div 要素 -->
    <div class="swiper-container">
    
    <!-- ラッパー(クラス名=slider)の（スライドを囲む） div 要素 -->
      <div class="swiper-wrapper">
    
    <!-- それぞれのスライドの div 要素（１） -->
         <div class="swiper-slide">
           <img src="img/digital-marketing-1433427_1280.png" alt="実績画像1">
           <div class="slider-txt">
              <h3>株式会社サンプル採用サイトのコーディングを行いました！</h3>
              <p></p>
           </div>
         </div>
    
    <!-- それぞれのスライドの div 要素（２） -->
         <div class="swiper-slide">
           <img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt="実績画像2">
           <div class="slider-txt">
             <h3>コーディングカンファレンスのイベント LPの制作を行いました！</h3>
             <p>採用技術：jQuery,WordPress<br>実装期間：4週間<br>担当コーダー：石井</p>
           </div>
          </div>
    
    <!-- それぞれのスライドの div 要素（３） -->
          <div class="swiper-slide">
            <img src="img/digital-marketing-1433427_1280.png" alt="実績画像3">
            <div class="slider-txt">
              <h3>株式会社サンプル様採用サイトのコーデ ィングを行いました！</h3>
              <p>採用技術：jQuery,Bootstrap4<br>実装期間：2週間<br>担当コーダー：石井</p>
            </div>
           </div>
    
    <!-- それぞれのスライドの div 要素（４） -->
           <div class="swiper-slide">
             <img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt="実績画像4">
               <div class="slider-txt">
                 <h3>株式会社サンプル様通販サイトのコーデ ィングを行いました！</h3>
                 <p>採用技術：jQuery,Bootstrap4<br>実装期間：6週間<br>担当コーダー：石井</p>
               </div>
            </div>
    
    <!-- それぞれのスライドの div 要素（５） -->                     
            <div class="swiper-slide">
              <img src="img/digital-marketing-1433427_1280.png" alt="実績画像5">
                 <div class="slider-txt">
                    <h3>株式会社サンプル採用サイトのコーディ ングを行いました！</h3>
                    <p>採用技術：jQuery,Bootstrap4<br>実装期間：2週間<br>担当コーダー：石井</p>
                  </div>
              </div>
    
        </div><!-- ラッパー(クラス名=slider)の（スライドを囲む） div 要素 -->
       </div><!-- スライダーのメインコンテナの div 要素 -->
[/code]


CC BY-SA 4.0
2021-07-06T17:03:10.077
78012
2021-07-06T17:03:10.077
46944
78011
answer