new Swiperを読み込んでくれない

Question

前提・実現したいこと

ruby on rails でアプリ制作中、
ユーザーページにそのユーザーの投稿を表示させる際、swiper.jsを導入したのだが、new Swiper以降の記述が反応しない。

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

ドラッグしながらスクロールはできるのだが、また最初のslideまで戻ってしまう。

該当のソースコード

users/show.html.haml

.swiper-container.swipes.p-2
          .swiper-wrapper.p-1
            - @posts.each do |post| 
              .events__content.col-sm-6.col-md-4.mb-3
                .swiper-slide
                  .card{id: post.id}
                    %label.m-1
                      - if post.image.present?
                        %img.card-img-top.img-fluid.rounded{src: "#{post.image}"}
                      - else
                        %img.card-img-top.img-fluid.rounded{src: "/assets/noimage.png"}
                      .card-body.event
                        %h5= link_to "#{post.title}", post_path(post.id), class: "event-title stretched-link text-decoration-none"
                        .event__name 
                          #{post.user.name} さん
                        .text-right
                          = l post.created_at, format: :long
                  .card.col-auto
                    .text-left
                      - post.genre_list.each do |genre|
                        .badge.badge-primary{data:{role: "tagsinput"}}
                          = link_to "#{genre}", tag_path(genre), class: 'text-decoration-none text-white'
                  - if user_signed_in?
                    .offset-8.col-auto.card
                      .text-center.likes
                        = render partial: '/posts/posts', locals: {post: post}
          .swiper-button-prev
          .swiper-button-next
          .swiper-pagination
= javascript_include_tag "https://unpkg.com/swiper/js/swiper.min.js"

application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Moyoshi
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = stylesheet_link_tag    "https://unpkg.com/swiper/css/swiper.min.css"
    = javascript_include_tag "https://unpkg.com/swiper/js/swiper.min.js"
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    %header.navbar.navbar-expand-lg.bg-primary.row.shadow-sm.fixed-top.px-5
      %h5.col-auto.text-left
        = link_to "Moyoshi", "/", class: "app-name__logo text-decoration-none text-center text-white"
      .col.text-left
        - if user_signed_in?
          = link_to "#{current_user.name}", user_path(current_user.id), class: "edit-user user-btn text-decoration-none mr-3 text-white"
          = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "user-logout user-btn text-decoration-none text-white"
        - else
          = link_to "新規登録", new_user_registration_path, class: "new-user user-btn text-decoration-none mr-3 text-white"
          = link_to "ログイン", new_user_session_path, class: "user-login user-btn text-decoration-none text-white"
    
    = yield


    %footer.bg-primary.sticky-bottom
      .text-center.py-3
        = link_to "トップに戻る", root_path, class: "text-white text-decoration-none"
      %copyright
        .text-center
          copyright

users/show.js

$(function(){
  console.log('OK');
  var mySwiper = new Swiper('.swiper-container', {
    autoHeight: true,
    loop: true,
    freeMode: true,
    slidesPerView: 3,
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  });
});

試したこと

swiper.jsのversionが古いことに気付き、新しいものに変えた。

new Swiper内の'.swiper-container'の部分を、'swiper-wrapper'や'swiper-slide'などのにしてみると、以下のエラーがconsoleで表示される。

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

'swiper-container'のままだと、何も反応しないし、その他のオプションを変更しても何も変化がないので、おそらく、new Swiperの部分がうまく読み込まれていないのだろう。

ちなみに、paginationも表示されていない。

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

Ruby 2.5.1
ruby on rails 5.2.4.2
bootstrap 4.4.1
jquery-rails 4.3.5

Answer 1

html.hamlの記述で、swiper-container, swiper-wrapper, swiper-slideの階層構造がきちんと親子孫の形になっていなかったのが原因でした。お騒がせしました。

前の記述では、swiper-wrapperの後に、events__contentのdivがあったのですが、修正して、events__conentとswiper-slideを同じdivのクラスとしてまとめた結果、うまく動作しました。

html.haml

.swiper-container.p-2.rounded
          .swiper-wrapper.p-1
            - @posts.each do |post| 
              .swiper-slide.events__content.col-sm-6.col-md-4.mb-3
                .card{id: post.id}
                  %label.m-1
                    - if post.image.present?
                      %img.card-img-top.img-fluid.rounded{src: "#{post.image}"}
                    - else
                      %img.card-img-top.img-fluid.rounded{src: "/assets/noimage.png"}
                    .card-body.event
                      %h5= link_to "#{post.title}", post_path(post.id), class: "event-title stretched-link text-decoration-none"
                      .event__name 
                        #{post.user.name} さん
                      .text-right
                        = l post.created_at, format: :long
                .card.col-auto
                  .text-left
                    - post.genre_list.each do |genre|
                      .badge.badge-primary{data:{role: "tagsinput"}}
                        = link_to "#{genre}", tag_path(genre), class: 'text-decoration-none text-white'
                - if user_signed_in?
                  .offset-8.col-auto.card
                    .text-center.likes
                      = render partial: '/posts/posts', locals: {post: post}
          - if @posts.count >= 4
            .swiper-button-prev
            .swiper-button-next
            .swiper-pagination

Answer 2

ざっと見ただけですが、下記コードをusers/show.htmlとapplication.htmlで2回読み込んでいるので、まず1回にする。

javascript_include_tag "https://unpkg.com/swiper/js/swiper.min.js"

そのうえで動かないようであれば、下記を参考に見直してみてはいかがでしょうか？
https://qiita.com/emincoring/items/18d07d0aec5d9836227c

Comments

[SomaSekimoto]

返信ありがとうございます！！

別のことが原因だということがわかり、無事解決できました！
ご協力ありがとうございました！