swiperを実装している時にエラーが起きている現象を解決したい。

現在、swiperの実装をしているのですが、ネットに上がっていたコードを持ってきて、実装してみると
理想の形になったので、自身が書いているコードのクラス名に変更したりして実装しようとしたら、
エラーが起きてしまうのに苦戦しています。

理想の動きになっているコードは下記になります。

ruby:/index.html.haml
1.swiper-container
2  / メイン表示部分
3  .swiper-wrapper
4    / 各スライド
5    .swiper-slide
6      = link_to "https://amazon.co.jp/dp/4839956758/", class: "categorys-book" do
7        = image_tag "recommended/front1.jpg", class: "img"
8
9    .swiper-slide
10      = link_to "https://amazon.co.jp/dp/4797398892/", class: "categorys-book" do
11        = image_tag "recommended/front2.jpg", class: "img"
12
13    .swiper-slide
14      = link_to "https://amazon.co.jp/dp/4797383585", class: "categorys-book" do
15        = image_tag "recommended/front3.jpg", class: "img"
16  .swiper-button-prev
17  .swiper-button-next
18  .swiper-pagination

こちらのコードだと画像がスライドしていくようになりますが、

自身が書いたコードに当てはめようとすると、

ruby:/index.html.haml
1.Content
2  .Content__like 
3    %h2 オススメ一覧
4    .Content__like__end
5      フロントエンド編
6      .Content__like__end__swiper-container
7        .Content__like__end__swiper-container__wrapper
8          .Content__like__end__swiper-container__wrapper__slide
9            = link_to "https://amazon.co.jp/dp/4839956758/", class: "categorys-book" do
10              = image_tag "recommended/front1.jpg", class: "img"
11          .Content__like__end__swiper-container__wrapper__slide
12            = link_to "https://amazon.co.jp/dp/4797398892/", class: "categorys-book" do
13              = image_tag "recommended/front2.jpg", class: "img"
14          .Content__like__end__swiper-container__wrapper__slide
15            = link_to "https://amazon.co.jp/dp/4797383585", class: "categorys-book" do
16              = image_tag "recommended/front3.jpg", class: "img"

こちらのコードが自分が書いたコードになります。

このようにしてコンソールを見てみると、

0:892 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at Object.getTranslate (0:892)
    at t.getTranslate (0:1862)
    at t.loopFix (0:2458)
    at 0:7801

このようなエラーが出てきています。

Could not load content for https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/0 (HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

上記はソースをみるとエラーが起きている物になります。

javascript
1$(function() {
2  var mySwiper = new Swiper ('.Content__like__end__swiper-container', { //こちらのクラス名は自身が書いたコードで、調べて出てきたコードは .swiper-containerになっていました。
3    loop: true,        //画像のループ
4    effect: 'slide',   //切り替わるときのアニメーション
5    speed: 3000,       //画像の切替スピード
6    autoplay: {        //自動で動かす
7      delay: 3000,
8      disableOnInteraction: true
9    },
10    pagination: {      //ページネーション
11      el: '.swiper-pagination',
12      type: 'bullets',
13      clickable: true
14    },
15    navigation: {      //ナビケーション
16      nextEl: '.swiper-button-next',
17      prevEl: '.swiper-button-prev',
18    },
19  });
20});

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Portfolio
    %link{:href => "https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css", :rel => "stylesheet"}/
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application'
    %body
    %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js"}
    = yield

このようにしています。
どのようすると解決できますでしょうか。。
どなたかお願い致します。

nomura02

2021/01/25 13:08

こんばんは、私も初心者ですが、何かお力になれましたら、幸いです。 swiperは、私も今現在進行形で、使っていて、これは正常に動いております。ち…ちなみになのですが、普通のHTMLとCSSの記述を見せて頂くことは可能でしょうか？？エラーでは、コンテンツを読み込めませんでしたとありますので、何かHTML側の記載か読み込みがあやしいのかなと思ったのですが、私の方で書いてるコードと様子が違ったので…

退会済みユーザー

2021/01/26 04:16 編集

コメントありがとうございます。 hamlとscssしか無いのでどうしましょう。。。多分ここですね。。 ```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <title>Portfolio</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css" rel="stylesheet">/</link> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application' %> <body></body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js"></script> <%= yield %> </head> </html> ``` bodyの中にないからでしょうか？？変更して実行してみましたが変わらずエラーが出ました。。。

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

回答1件

ベストアンサー

ちなみになのですが、正常に動いてる私のHTMLのheadはこうなっているのですが、
何か参考になればと思います…
どうでしょうか…

ヘッドの中にこのように読み込むのをかきます

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5
6     <!--- 基本情報
7    ================================================== -->
8    <meta charset="UTF-8">
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <title>MECKRENBURG</title>
11
12    <!--- CSS
13    ================================================== -->
14    <!-- originalCSS -->   
15    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
16    <!-- swiper -->
17    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css">
18
19    <!-- script
20    ================================================== -->
21    <!-- JQuery -->    
22    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
23    <!-- swiper -->
24    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
25</head>
26
27
28～ここに内容(body)があります～
29bodyタグの終わりの直前で、オプションを加えたJSを読み込んでいます。
30
31        <!-- 共通 -->
32        <script type="text/javascript" src="js/index.js"></script>
33
34        <!-- swiperのオプション -->
35        <script type="text/javascript" src="js/swiper.js"></script>
36
37    </body>