Q&A
https://hsmt-web.com/blog/js-swiper/
こちらのサイトにて、「CDNを使う場合でも､SSLに対応しているかどうかで読み込めないことがあります｡
「https://」「http://」の違いで読み込めないことを防止するために､「//」だけにすることをおすすめします｡」
と書かれていたので、「//cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.js」にしていました。
前提・実現したいこと
プログラミング初心者です(html、CSSはある程度触ったことあります)。
運営している実店舗のサイトを編集しています。
商品への導線のため、画像を複数表示させたままスライドさせて、特定の画像をクリック・タップすると別ページに進むようにしたいです。
そのため、Swiperを利用したいと考えています。
発生している問題・エラーメッセージ
矢印を押しても画像が動きません。
エラーメッセージ
Uncaught ReferenceError: Swiper is not defined
at test.html:194
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4<style> 5 6</style> 7 8<meta http-equiv="Content-Type" content="/text/html; charset=UTF-8"> 9<title></title> 10<meta name="description" content=""> 11<meta name="keywords" content=""> 12<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 13<link rel="stylesheet" type="" href=""> 14<link rel="stylesheet" href=""> 15 16<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css"> 17<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.css"> 18</head> 19 20<header id="" class=""> 21</header> 22 23<body class="test"> 24 25 26<div class=""> 27 <div class=""> 28 <div class=""> 29 <div class=""> 30 <h1 class=""></h1> 31 <div class=""> 32 <a href="" data-lightbox=""><img src="" alt=""></a> 33 </div> 34 <div class=""> 35<a href="" data-lightbox=""><img src=""></a> 36<a href="" data-lightbox=""><img src=""></a> 37 </div> 38 <div class="textbox"> 39<p style="padding: 10px;"> 40 41<font size="2"> 42 43</font> 44</p></div><br> 45<div class=""> 46 47 </div> 48 </div> 49 </div> 50 </div> 51<br> 52 53<h2></h2> 54 55<!-- Swiper START --> 56<div class="swiper-container"> 57 <!-- メイン表示部分 --> 58 <div class="swiper-wrapper"> 59 <!-- 各スライド --> 60 <div class="swiper-slide"><img src="" alt=""></div> 61 <div class="swiper-slide"><img src="" alt=""></div> 62 <div class="swiper-slide"><img src="" alt=""></div> 63 <div class="swiper-slide"><img src="" alt=""></div> 64 </div> 65 <div class="swiper-button-prev"></div> 66 <div class="swiper-button-next"></div> 67 <div class="swiper-pagination"></div> 68</div> 69<!-- Swiper END --> 70 71</div> 72<br> 73<center><a href=""></a></center> 74<br> 75 76 77<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 78<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script> 79<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.js"></script> 80<script> 81var Swiper = new Swiper('.swiper-container', { 82 navigation: { 83 nextEl: '.swiper-button-next', 84 prevEl: '.swiper-button-prev', 85 } 86}) 87</script> 88</body> 89</html>
試したこと
いくつかのサイトを覗いて、</body>の上に<script>を置く、バージョンに合った書き方をする、httpを消す等していますが、矢印を押しても一枚目だけしか表示されません。
補足情報（FW/ツールのバージョンなど）
いつもFC2のファイルマネージャー→ソース表示で編集で入力してます。
回答2件
0
自己解決
今までFC2のプレビューから動作確認をしていましたが、いったん保存してページに直接行くとちゃんと動きました。
プレビューを妄信してはいけないということですね。
回答していただいた方々、ご協力ありがとうございました。
投稿2021/07/09 06:46
総合スコア2
0
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.js"></script>
https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.jsじゃないんですか？
投稿2021/07/08 01:41
総合スコア8402
質問のコードをそのままで試してみましたが、エラーは出ませんでした。
画像も左右にスライドしした。
お困りの状況が再現できませんでした。
> yuuki0222さん
横からすみません。
それは相対パスの一種です。
そこを省略した場合、現在のページと同じプロトコル（httpなど）が使用されます。
もし、HTMLファイルをダブルクリックして開いている場合、httpではなくfileプロトコルになってしまいますので、ローカルPCの中を探します。
つまり、インターネット上にあるファイルにはアクセスできません。
https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL#examples_of_absolute_urls
---
現状で、SSLに対応していないCDNはかなり稀だと思いますので、プロトコルは省略せずにhttps:を使用されることをおすすめします。
（そのブログ記事の説明は微妙に間違っているようにも思えます）
> Lhankor_Mhyさん
https:の件ありがとうございます。
記入したうえでもう一度見直してみます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。