swiperでスライドが動かせない。

前提・実現したいこと

swperを用いてスライドを作りたい。

発生している問題・エラーメッセージ

swiperを用いてスライドを作ろうとしたのですが動きませんでした。スライドがクリックしても指定時間を指定していても画像が切り替わりません。デベロッパーツールにエラーは出ていません。swiperのファイルをダウンロードせずにCDNを使っています。

該当のソースコード

javascript
1var mySwiper = new Swiper ('.swiper-container', {
2    // オプションパラメータ(一部のみ抜粋)
3    loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。
4    speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。
5    slidesPerView: 3, // 何枚のスライドを表示するか
6    spaceBetween: 10, // スライド間の余白サイズ(ピクセル)
7    direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。
8    effect: 'slide', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(カバーフロー) または "flip"(平面回転)
9
10    // スライダーの自動再生
11    // autoplay: true 　のみなら既定値での自動再生
12    autoplay: {
13        delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
14        stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
15        disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
16    },
17
18    // レスポンシブ化条件
19    breakpoints: {
20        // 980ピクセル幅以下になったら
21        980: {
22            slidesPerView: 3,
23            spaceBetween: 30
24        },
25        // 640ピクセル幅以下になったら
26        640: {
27            slidesPerView: 2,
28            spaceBetween: 20
29        }
30    },
31
32    // ページネーションを表示する場合
33    pagination: {
34        el: '.swiper-pagination',　 // ページネーションを表示するセレクタ
35    },
36
37    // 前後スライドへのナビゲーションを表示する場合
38    navigation: {
39        nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
40        prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
41    },
42
43    // スクロールバーを表示する場合
44    scrollbar: {
45        el: '.swiper-scrollbar', // スクロールバーを表示するセレクタ
46    }
47});

html5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6    <title>sample site</title>
7    <link rel="stylesheet" href="css/style.css">
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
9    <link rel="script" href="main.js">
10</head>
11<body>
12<header class="header">
13    <div class="title">
14        <h1 class="top-title">タイトル</h1>
15    </div>
16    <div class="contact-button">
17        <a href="contact.html"><p class="contact-button-text">お問い合わせ</p></a>
18    </div>
19</header>
20<div class="wrapper">
21    <div class="main">
22        <div class="swiper-container">
23        <div class="swiper-wrapper">
24            <div class="swiper-slide"><img src="https://cdn.pixabay.com/photo/2015/07/02/10/13/cycling-828646_1280.jpg" alt="自転車"></div>
25            <div class="swiper-slide"><img src="https://cdn.pixabay.com/photo/2016/01/19/14/55/mountain-bike-1149074_1280.jpg" alt="自転車"></div>
26            <div class="swiper-slide"><img src="https://cdn.pixabay.com/photo/2016/03/09/09/18/biking-1245722_1280.jpg" alt="自転車"></div>
27        </div>
28            <div class="swiper-pagination"></div>
29            <div class="swiper-button-prev"></div>
30            <div class="swiper-button-next"></div>
31            <div class="swiper-scrollbar"></div>
32        </div>
33       
34<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
35
36</body>
37</html>

試したこと

インターネットで調べて説明しているサイトのコードをコピーしてみましたが動きませんでした。

m.ts10806

2019/08/16 13:14

「動かない」だけでは現象が何もわかりません。それは「あなたが想定していた通りに動いてない」だけでしょうか。それとも何も起きないのでしょうか。ブラウザデベロッパーツールのコンソールにエラー出ていませんでしょうか。起きている現象を具体的に記載してください。 https://teratail.com/help/question-tips#questionTips3-4-1 また、「インターネットで調べて説明しているサイト」は何でしょうか。 URLを追記してください。