swiper.jsを使用したいのですが、うまく動作しません

###前提・実現したいこと
swiper.jsを使用したいのですが、うまく動作しません。

エラーメッセージ

スライダーのボタンは表示されているのですが、押しても反応しません。
braketsのプレビュー機能で確認しながら作業しています。

###該当のソースコード
```ここに言語を入力
ここにご自身が実行したソースコードを書いてください
```ここに言語を入力
<!DOCTYPE html>

<html lang="ja">
    
    <head>
        
    <link rel="stylesheet" href="top.css" type="text/css">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
     <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: white;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    </style>
    </head>
    
    
    <body> 
        
     <header id="header">
      <ul class="float">
       <li>ABOUT</li>
       <li>SHOP</li>
       <li>PHOTO</li>
      </ul> 
      
      <div class="icon">
         <ul>
            <li><img src="ichijyoji_web_icon-1.jpg"></li>
            <li><img src="ichijyoji_web_icon-2.jpg"></li>
            <li><img src="ichijyoji_web_icon-3.jpg"></li>
         </ul>
      </div>
         
      <div class="main_logo"><img src=ichijyoji_web_mainlogo.jpg></div> 
<!-- Slider main container -->
      <div class="swiper-container">
<!-- Additional required wrapper -->
        <div class="swiper-wrapper">
<!-- Slides -->
          <div class="swiper-slide"><img src="main.jpg"></div>
          <div class="swiper-slide"><img src="main2.jpg"></div>
          <div class="swiper-slide"><img src="main3.jpg"></div>

        </div>
<!-- ページネーション -->
        <div class="swiper-pagination"></div>

<!-- ナビゲーションボタン -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
         </div>   
<!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
    </script>     
     </header>
     
     <div id="side">
     
     </div>
        
     <main id="main">
     
     </main>
     
     <footer id="footer">
        
     </footer>
  
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>   
    </body>

</html>

###試したこと
同じ階層にjsとcssのファイルは入っています。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/05/11 02:39

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2017/05/11 16:29

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

行動規範の内容に同意します

回答1件

ページ読み込み後に swiperを発動するようにすればいかがでしょうか。

<script> 
window.onload = load;
function load(){
var swiper = new Swiper('.swiper-container', { 
pagination: '.swiper-pagination', 
nextButton: '.swiper-button-next', 
prevButton: '.swiper-button-prev', 
paginationClickable: true, 
spaceBetween: 30, 
centeredSlides: true, 
autoplay: 2500, 
autoplayDisableOnInteraction: false 
}); 
}
</script>

私が実際試してみたコード↓

<!DOCTYPE html>

<html lang="ja">

<head>

<link rel="stylesheet" href="top.css" type="text/css"> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"> 
<style> 
html, body { 
position: relative; 
height: 100%; 
} 
body { 
background: white; 
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
font-size: 14px; 
color:#000; 
margin: 0; 
padding: 0; 
} 
.swiper-container { 
width: 100%; 
height: 100%;

} 
.swiper-slide { 
text-align: center; 
font-size: 18px; 
background: #fff;

/* Center slide text vertically */ 
display: -webkit-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
-webkit-box-pack: center; 
-ms-flex-pack: center; 
-webkit-justify-content: center; 
justify-content: center; 
-webkit-box-align: center; 
-ms-flex-align: center; 
-webkit-align-items: center; 
align-items: center; 
} 
</style> 
</head>

<body> 

<header id="header"> 
<ul class="float"> 
<li>ABOUT</li> 
<li>SHOP</li> 
<li>PHOTO</li> 
</ul> 

<div class="icon"> 
<ul> 
<li><img src="ichijyoji_web_icon-1.jpg"></li> 
<li><img src="ichijyoji_web_icon-2.jpg"></li> 
<li><img src="ichijyoji_web_icon-3.jpg"></li> 
</ul> 
</div>

<div class="main_logo"><img src=ichijyoji_web_mainlogo.jpg></div>  
<!-- Slider main container --> 
<div class="swiper-container"> 
<!-- Additional required wrapper --> 
<div class="swiper-wrapper"> 
<!-- Slides --> 
<div class="swiper-slide"><img src="test.jpg"></div> 
<div class="swiper-slide"><img src="test.jpg"></div> 
<div class="swiper-slide"><img src="test.jpg"></div>

</div> 
<!-- ページネーション --> 
<div class="swiper-pagination"></div>

<!-- ナビゲーションボタン --> 
<div class="swiper-button-prev"></div> 
<div class="swiper-button-next"></div> 
</div>    
<!-- Swiper JS --> 
<script src="../dist/js/swiper.min.js"></script>

<!-- Initialize Swiper --> 
<script> 
window.onload = load;
function load(){
var swiper = new Swiper('.swiper-container', { 
pagination: '.swiper-pagination', 
nextButton: '.swiper-button-next', 
prevButton: '.swiper-button-prev', 
paginationClickable: true, 
spaceBetween: 30, 
centeredSlides: true, 
autoplay: 2500, 
autoplayDisableOnInteraction: false 
}); 
}
</script>      
</header>

<div id="side">

</div>

<main id="main">

</main>

<footer id="footer">

</footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>   
</body>

</html>

投稿2017/05/11 02:19

退会済みユーザー

総合スコア0

mirei

2017/05/11 07:33

window.onload = load; function load(){ を追加してみましたが、改善されませんでした。他の原因があるのでしょうか？よろしくお願いします。

退会済みユーザー

2017/05/11 08:30

window.onload = load; function load(){ を追加して頂いたとのことですが、下の閉じタグの部分も追加して頂きましたでしょうか？具体的には下記の <script> window.onload = load; function load(){ var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: 2500, autoplayDisableOnInteraction: false }); ↓これです } ↑これです </script>

行動規範の内容に同意します