Ruby on RailsでSwiperが動かない

前提・実現したいこと

Swiperを使ってみたく、公式やネット上の記事を参考に実装してみたのですが、Chromeの検証ツールのコンソールでエラーが出ており、スライドボタンを押しても反応がありません。
Swiper is not defined と出ているので、Swiperのスクリプトが読み込めていないのでしょうか？ご教示よろしくお願い致します

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

Uncaught ReferenceError: Swiper is not defined
    at Object../app/javascript/swiper.js (swiper.js:1)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.js (application.js:5)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
./app/javascript/swiper.js @ swiper.js:1
__webpack_require__ @ bootstrap:19
./app/javascript/packs/application.js @ application.js:5
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

該当のソースコード

aplication.html.erb

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Hideandchef</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
8    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10    <script src="https://js.pay.jp/" , type="text/javascript"></script>
11  </head>
12
13  <body>
14    <%= yield %>
15    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
16  </body>
17</html>

aplication.js

javascript
1require("@rails/ujs").start()
2require("@rails/activestorage").start()
3require("channels")
4require("../card")
5require("../swiper")

swiper.js

javascript
1var mySwiper = new Swiper('.swiper-container', {
2  pagination: {
3    el: '.swiper-pagination',
4    type: 'progressbar',
5  },
6  navigation: {
7    nextEl: '.swiper-button-next',
8    prevEl: '.swiper-button-prev',
9  },
10});

index.html.erb

html
1<!-- Swiper -->
2  <div class="swiper-container">
3    <div class="swiper-wrapper">
4      <div class="swiper-slide">Slide 1</div>
5      <div class="swiper-slide">Slide 2</div>
6      <div class="swiper-slide">Slide 3</div>
7      <div class="swiper-slide">Slide 4</div>
8      <div class="swiper-slide">Slide 5</div>
9      <div class="swiper-slide">Slide 6</div>
10      <div class="swiper-slide">Slide 7</div>
11      <div class="swiper-slide">Slide 8</div>
12      <div class="swiper-slide">Slide 9</div>
13      <div class="swiper-slide">Slide 10</div>
14    </div>
15    <!-- Add Pagination -->
16    <div class="swiper-pagination"></div>
17    <!-- Add Arrows -->
18    <div class="swiper-button-next"></div>
19    <div class="swiper-button-prev"></div>
20  </div>
21  <!-- /Swiper -->

試したこと

をbodyではなくheaderに記述した場合もうまく動きませんでした。

補足情報（FW/ツールのバージョンなど）

rails(6.0.0)
swiper(6.3.2)

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

回答1件

ベストアンサー

定義が読み込まれていないのに利用しようとしています。
現在は下記のようになっています。

js
1let b = new a();
2class a{}

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

の記述のあとに new Swiper()が来るように調整してください。

js
1class a{}
2let b = new a();

投稿2020/09/30 01:56

編集2020/09/30 01:59

m.ts10806

総合スコア80875

Shoooooo

2020/09/30 07:38

ご回答有難うございました。下記のように記述したところスライドするようにはなりました。有難うございました。 ``` <!DOCTYPE html> <html> <head> <title>Hideandchef</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css", type="text/css"> <script src="https://unpkg.com/swiper/swiper-bundle.min.js", type="text/javascript"></script> <script src="https://js.pay.jp/" , type="text/javascript"></script> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> <script> var mySwiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', type: 'progressbar', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </body> </html> ``` しかし、 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/swiper/swiper-bundle.min.css". と出ており、cssが適用されていない？ようなので、もう少し勉強してみます。