質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2691閲覧

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

ShiroganeDesign

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/08/16 12:37

編集2019/08/16 22:23

前提・実現したいこと

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>

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/16 13:14

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

回答1

0

ベストアンサー

main.jsswiper.min.jsより後に読み込む必要があります。
また、main.jsはlink要素で無くscript要素で読み込む必要があります。

投稿2019/08/17 00:40

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問