Rails 投稿画像にSwiperが効かない

SNSアプリを開発していて、投稿画像にSwiperを設定したいのですが、上手くできません。
画像は2枚まで投稿できる仕様にしています。

具体的には、2枚画像を投稿した場合は左右にスワイプさせて画像を切り替えたいです。

現在は、画像を複数投稿している状態でも表示されるのは1枚目のみで、前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。ボタンを押しても、左右にスワイプしても画像が変わりません。

######現在のエラー文は下記の通りです。
画像をスワイプした時に表示されます。

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at getTranslate (utils.js:30) at Swiper.getSwiperTranslate [as getTranslate] (getTranslate.js:15) at Swiper.onTouchMove (onTouchMove.js:124)

######現在の環境は下記の通りです。

ruby 2.6.5
rails 6.0.0
jquery 3.3.1
capistrano 3.14.1
Web Server Nginx
Application Server Unicorn
Amazon S3
Swiper

######現在のコードは下記の通りです。

applicationhtmlerb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Boast</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
8    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
10    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
11    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
12
13    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
14    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
15  </head>
16
17  <body>
18    <% flash.each do |name, message| %>
19      <%= content_tag :div, message, class: name %>
20    <% end %>
21    <%= yield %>
22  </body>
23</html>
24
25

indexhtmlerb
1<div class="post-contents">
2    <ul class="post-lists">
3      <% @posts.each do |post| %>
4        <li class="list">
5          <span>
6            <%= link_to user_path(post.user.id) do %>
7              @<%= post.user.nickname %>
8            <% end %>
9          </span>
10          <div class="swiper-container">
11            <%= link_to post_path(post.id) do %>
12              <div class="swiper-wrapper">
13                <% post.images.each do |image| %>
14                  <div class="swiper-slide">
15                    <%= image_tag image, class:"post-image" %>
16                  </div>
17                <% end %>
18              </div>
19            <% end %>
20            <div class="swiper-button-prev swiper-button-black"></div>
21            <div class="swiper-button-next swiper-button-black"></div>
22          </div>
23          <div class="heart-btn" id="favorites_buttons_<%= post.id %>">
24            <%= render partial: "shared/like", locals: {post: post} %>
25          </div>
26          <p class="post-text">
27            <%= post.text %>
28          </p>
29          <ul class="favorite_lists hidden" id="favorites_user_<%= post.id %>">
30            <%= render partial: "shared/favorite_user", locals: {post: post} %>
31          </ul>
32        </li>
33      <% end %>
34      <%= paginate @posts %>
35    </ul>
36  </div>

swiperjs
1document.addEventListener("DOMContentLoaded", function(){
2  var mySwiper = new Swiper('.swiper-container', {
3    navigation: {
4      nextEl: '.swiper-button-next',
5      prevEl: '.swiper-button-prev'
6    }
7  });
8});

applicationjs
1require("@rails/ujs").start()
2// require("turbolinks").start()
3require("@rails/activestorage").start()
4require("channels")
5require('./preview')
6require('./favorite')
7require('./swiper')

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

回答1件

自己解決

ビューを下記の通りに修正したところ効くようになりました！
具体的には<%= link_to post_path(post.id) do %> <% end %>の記述場所を変更しました。

indexhtmlerb
1<div class="swiper-container">
2  <div class="swiper-wrapper">
3    <% post.images.each do |image| %>
4      <div class="swiper-slide">
5        <%= link_to post_path(post.id) do %>
6          <%= image_tag image, class:"post-image" %>
7        <% end %>
8      </div>
9    <% end %>
10  </div>
11  <div class="swiper-button-prev swiper-button-black"></div>
12  <div class="swiper-button-next swiper-button-black"></div>
13</div>