swiperのCDNからの読み込み

前提

自作サイトを作っています。Effect coverflowを実装してみたく、初めてSwiperを使おうとしています。
https://swiperjs.com/demos#effect-coverflow

該当htmlを書いた下に別のhtmlを書いたら表示されたのでswiperは存在はしているみたいです。

実現したいこと

Swiperの読み込みをしたいです。公式と2つのサイトを参考に行いました。
公式
https://swiperjs.com/get-started#use-swiper-from-cdn
参考①
https://www.kaname-gh.co.jp/web_design/js-coverflow-slider/
参考②
https://reiwinn-web.net/2018/03/15/swiper-4-1-6/

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

あるはずの場所がなにもないままです...

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>English study</title>
9
10
11  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
12    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
13  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
14    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
15  </script>
16
17  <!-- FAVICON -->
18  <link rel="icon" href="./images/icons8-globe-48.png">
19
20
21  <!-- Font Awesome -->
22  <script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script>
23
24
25<!-- SWIPER cssの上 -->
26<link　rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
27<style>
28  .swiper {
29      padding-top: 100px;
30      padding-bottom: 100px;
31  }
32
33  .swiper-slide {
34      height: 300px;
35  }
36
37  .swiper-slide img {
38      width: 100%;
39  }
40
41  .slide-invisible {
42      opacity: 0;
43  }
44
45  .swiper-slide-active img {
46      transform: scale(1.5);
47  }
48</style>
49
50
51  <link rel="stylesheet" href="style.css">
52  <!-- ANIMATE -->
53  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
54</head>
55
56-----------------------------
57
58<!-- swiper -->
59
60    <div class="swiper mySwiper">
61      <div class="swiper-wrapper">
62        <div class="swiper-slide">
63          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
64        </div>
65        <div class="swiper-slide">
66          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
67        </div>
68        <div class="swiper-slide">
69          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
70        </div>
71        <div class="swiper-slide">
72          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
73        </div>
74        <div class="swiper-slide">
75          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
76        </div>
77        <div class="swiper-slide">
78          <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
79        </div>
80        <div class="swiper-slide">
81          <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
82        </div>
83        <div class="swiper-slide">
84          <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
85        </div>
86        <div class="swiper-slide">
87          <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
88        </div>
89      </div>
90      <div class="swiper-pagination"></div>
91      
92      <div class="swiper-button-prev"></div>
93      <div class="swiper-button-next"></div>
94  
95    </div>
96
97----------------------------
98
99  <!-- jQuery -->
100  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
101
102  <!-- inview library -->
103  <script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
104  <script src="js/3-1-2.js"></script>　
105
106  <!-- SWIPER -->
107  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
108
109  <script>
110    function slideVisibleToggle(sWrap) {
111        sWrap.forEach(function(slideItem) {
112            if ( slideItem.classList.contains('swiper-slide-visible') == true ){
113                if ( slideItem.classList.contains('slide-invisible') == true ){
114                    slideItem.classList.remove('slide-invisible');
115                }
116            } else {
117                if ( slideItem.classList.contains('slide-invisible') == false ){
118                    slideItem.classList.add('slide-invisible');
119                }
120            }
121        });
122    }
123
124    var swiper = new Swiper(".mySwiper", {
125        autoplay: {
126            disableOnInteraction: false,
127            reverseDirection: false,
128            pauseOnMouseEnter: true,
129        },
130        effect: "coverflow",
131        centeredSlides: true,
132        slidesPerView: 3,
133        breakpoints: {
134            601: {
135                slidesPerView: 5,
136            },
137            1200: {
138                slidesPerView: document.querySelectorAll('.swiper-slide').length,
139            }
140        },
141        loop: true,
142        coverflowEffect: {
143            rotate: 10,
144            slideShadows: false,
145        },
146        pagination: {
147            el: ".swiper-pagination",
148        },
149        navigation: {
150            nextEl: '.swiper-button-next',
151            prevEl: '.swiper-button-prev',
152        },
153        on: {
154            slideChange: function () {
155                slideVisibleToggle(document.querySelectorAll('.swiper-slide'));
156            },
157        },
158    });
159</script>
160
161
162
163  <script src="index.js" defer></script>
164
165
166
167
168</body>
169
170</html>
171
172
173
174
175

試したこと

style.css と index.js にそれぞれ書いたバージョンも試しましたが、ダメでした。

ここに掲載のコードのみで新しくフォルダーを作って見てみましたが、何も表示されませんでした...

m.ts10806

2022/10/10 10:47

3-1-2.js index.js は何でしょう。

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

回答1件

ベストアンサー

26行目付近、<link rel="stylesheet"... />のlinkとrelの間のスペースが全角になっていましたので、半角スペースに修正したら表示されました。
（ご存知とは思いますが）swiper実行のコードを書く前に、scriptタグでswiper-bundle.min.jsを読み込んでください。
（こちらもご存知かとは思いますが）swiperはピュアJSのプラグインですので、jQueryは不要です。

html
1 <!-- SWIPER cssの上 -->
2  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
3  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>