Swiperで画像をスライドさせたいが、矢印が反応しない

前提・実現したいこと

プログラミング初心者です(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件

自己解決

今までFC2のプレビューから動作確認をしていましたが、いったん保存してページに直接行くとちゃんと動きました。

プレビューを妄信してはいけないということですね。
回答していただいた方々、ご協力ありがとうございました。

投稿2021/07/09 06:46

yuuki0222

総合スコア2

<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

itagagaki

総合スコア8402

yuuki0222

2021/07/08 01:44

https://hsmt-web.com/blog/js-swiper/ こちらのサイトにて、「CDNを使う場合でも､SSLに対応しているかどうかで読み込めないことがあります｡「https://」「http://」の違いで読み込めないことを防止するために､「//」だけにすることをおすすめします｡」と書かれていたので、「//cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.js」にしていました。

itagagaki

2021/07/08 01:56

質問のコードをそのままで試してみましたが、エラーは出ませんでした。画像も左右にスライドしした。お困りの状況が再現できませんでした。

Lhankor_Mhy

2021/07/08 05:43 編集

> 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:を使用されることをおすすめします。（そのブログ記事の説明は微妙に間違っているようにも思えます）

yuuki0222

2021/07/08 07:20

> Lhankor_Mhyさん https:の件ありがとうございます。記入したうえでもう一度見直してみます。

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

あなたの回答