swiperがエラーも起きていないのですが、起動してくれない

Question

現在、swiperで画像に動きをつけているのですが、
エラーも起きていないのですが、機能してくれない状況でございます。
hamlとJavaScriptのコードはこちらになります。

  .Content__like 
    %h2 オススメ一覧
    .Content__like__end
      フロントエンド編
      .Content__like__end__swiper-container
        .Content__like__end__swiper-container__wrapper
          .Content__like__end__swiper-container__wrapper__slide
            = link_to "https://amazon.co.jp/dp/4839956758/", class: "categorys-book" do
              = image_tag "recommended/front1.jpg", class: "img"
          .Content__like__end__swiper-container__wrapper__slide
            = link_to "https://amazon.co.jp/dp/4797398892/", class: "categorys-book" do
              = image_tag "recommended/front2.jpg", class: "img"
          .Content__like__end__swiper-container__wrapper__slide
            = link_to "https://amazon.co.jp/dp/4797383585", class: "categorys-book" do
              = image_tag "recommended/front3.jpg", class: "img"
      .Content__like__end__swiper-button-prev
      .Content__like__end__swiper-button-next 
      .Content__like__end__swiper-pagination

$(function() {
  var mySwiper = new Swiper ('.categorys-book', {
    loop: true,        //画像のループ
    effect: 'slide',   //切り替わるときのアニメーション
    speed: 3000,       //画像の切替スピード
    // autoplay: {        //自動で動かす
    //   delay: 3000,
    //   disableOnInteraction: true
    // },
    pagination: {      //ページネーション
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    },
    navigation: {      //ナビケーション
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
});

このようにしています。
JSの

var mySwiper = new Swiper ('.categorys-book'

こちらのクラス名を全て当てはめてみても何も変わらないです。。。
どなたかご教授お願い致します。

#追記

<div class='Content'>
  <div class='Content__like'>
    <h2>オススメ一覧</h2>
    <div class='Content__like__end'>
      フロントエンド編
      <div class='Content__like__end__swiper-container'>
        <div class='Content__like__end__swiper-container__wrapper'>
          <div class='Content__like__end__swiper-container__wrapper__slide'>
          </div>
          <div class='Content__like__end__swiper-container__wrapper__slide'>
          </div>
          <div class='Content__like__end__swiper-container__wrapper__slide'>
          </div>
        </div>
        <div class='Content__like__end__swiper-container__swiper-button-prev'></div>
        <div class='Content__like__end__swiper-container__swiper-button-next'></div>
        <div class='Content__like__end__swiper-container__swiper-pagination'></div>
      </div>
    </div>
  </div>
</div>

どのバージョンか大事になるとみたのでこちらのバージョンを指定しています。

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

HTMLに変換したら何か見えてくるのではないかとご指摘ありましたので変換したコードを貼っておきます。

どなたかお願い致します。。。

Answer 1

こんにちは。

ドキュメントを読んだ方がいいですよ。

Add Swiper HTML Layout

Now, we need to add basic Swiper layout to our app:
Getting Started With Swiper

.Content__like 
  %h2 オススメ一覧
  .Content__like__end
    フロントエンド編
    .Content__like__end__swiper-container.swiper-container
      .Content__like__end__swiper-container__wrapper.swiper-wrapper
        .Content__like__end__swiper-container__wrapper__slide.swiper-slide
           = link_to "https://amazon.co.jp/dp/4839956758/", class: "categorys-book" do
             = image_tag "recommended/front1.jpg", class: "img"
        .Content__like__end__swiper-container__wrapper__slide
          = link_to "https://amazon.co.jp/dp/4797398892/", class: "categorys-book" do
            = image_tag "recommended/front2.jpg", class: "img"
        .Content__like__end__swiper-container__wrapper__slide
          = link_to "https://amazon.co.jp/dp/4797383585", class: "categorys-book" do
            = image_tag "recommended/front3.jpg", class: "img"
    .Content__like__end__swiper-button-prev.swiper-button-prev
    .Content__like__end__swiper-button-next.swiper-button-next
    .Content__like__end__swiper-pagination.swiper-pagination

  var mySwiper = new Swiper ('.swiper-container', 

---

当方、Rubyはほとんど使ったことがないので、Hamlは適当です。

Comments

[退会済みユーザー]

ありがとうございます！！できました。

またslideする画像が真ん中にならなくて少しずれているのですが、どのようにすればいいでしょうか？

```
.Content {
margin: 2px;
background-image: url(book2.jpg);
background-size: cover;
animation: SlideIn 7.6s;
@keyframes SlideIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

&__like {
color:#fff;
h2 {
padding: .5em;
font-size: 32px;
&:first-letter {
margin-right: .1em;
font-size: 1.5em;
}
}
&__end {
color:#fff;
font-size: 24px;
margin: 50px;

.swiper-container {
width: 30%;
margin-top: 20px;
padding: 20px;
// justify-content: center;
}
.swiper-wrapper {
margin: 30px;
}
.swiper-slide {
margin: 30px;
}
}

}
}
```

よろしければお願い致します。。

[Lhankor_Mhy]

.Content {
margin: 2px;
background-image: url(book2.jpg);
background-size: cover;
animation: SlideIn 7.6s;
@keyframes SlideIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

&__like {
color:#fff;
h2 {
padding: .5em;
font-size: 32px;
&:first-letter {
margin-right: .1em;
font-size: 1.5em;
}
}
&__end {
color:#fff;
font-size: 24px;
margin: 50px;

.swiper-container {
//width: 30%;
margin-top: 20px;
//padding: 20px;
// justify-content: center;
}
.swiper-wrapper {
//margin: 30px;
}
.swiper-slide {
//margin: 30px;
text-align: center;
}
}

}
}

こんな感じじゃないでしょうか。

[退会済みユーザー]

ありがとうございます。。。
前回から沢山ありがとうございます！！

もう一つだけ良いでしょうか。。
paginationの色を白に変更したいのですがどのようにすればいいでしょうか？
swiper-button-white
を追加するとみたのですが、どちらに追加したら良いでしょうか？

[Lhankor_Mhy]

.swiper-pagination-whiteの間違いではないでしょうか？
ページネーションの祖先ならどこでもいいと思いますよ。

[退会済みユーザー]

```
.Content__like__end__prev.swiper-button-prev.swiper-button-white
.Content__like__end__next.swiper-button-next.swiper-button-white
.Content__like__end__pagination.swiper-pagination.swiper-pagination-white
```
このようにして全て青から白に変更できました。
ありがとうございます！！

また、是非お願い致します。。。