teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Rails 投稿画像にSwiperが効かない

編集履歴

質問編集履歴

8

タイトルをわかりやすく変更

2020/09/09 02:58

投稿

75ks
75ks

スコア4

title CHANGED
@@ -1,1 +1,1 @@
1
- ko投稿画像にSwiperの設定ができない
1
+ Rails 投稿画像にSwiperが効かない
body CHANGED
File without changes

7

エラー文の追加

2020/09/09 02:58

投稿

75ks
75ks

スコア4

title CHANGED
File without changes
body CHANGED
@@ -5,8 +5,15 @@
5
5
 
6
6
  現在は、画像を複数投稿している状態でも表示されるのは1枚目のみで、前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。ボタンを押しても、左右にスワイプしても画像が変わりません。
7
7
 
8
+ ######現在のエラー文は下記の通りです。
8
- コンソールにエラーは表示されていません。
9
+ 画像をスワイプした時に表示されます。
9
10
 
11
+ `Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
12
+ at getTranslate (utils.js:30)
13
+ at Swiper.getSwiperTranslate [as getTranslate] (getTranslate.js:15)
14
+ at Swiper.onTouchMove (onTouchMove.js:124)`
15
+
16
+
10
17
  ######現在の環境は下記の通りです。
11
18
 
12
19
  - ruby 2.6.5
@@ -88,11 +95,13 @@
88
95
  ```
89
96
 
90
97
  ```swiperjs
98
+ document.addEventListener("DOMContentLoaded", function(){
91
- var mySwiper = new Swiper('.swiper-container', {
99
+ var mySwiper = new Swiper('.swiper-container', {
92
- navigation: {
100
+ navigation: {
93
- nextEl: '.swiper-button-next',
101
+ nextEl: '.swiper-button-next',
94
- prevEl: '.swiper-button-prev'
102
+ prevEl: '.swiper-button-prev'
95
- }
103
+ }
104
+ });
96
105
  });
97
106
  ```
98
107
 

6

エラーについての追記

2020/09/09 02:54

投稿

75ks
75ks

スコア4

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,8 @@
5
5
 
6
6
  現在は、画像を複数投稿している状態でも表示されるのは1枚目のみで、前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。ボタンを押しても、左右にスワイプしても画像が変わりません。
7
7
 
8
+ コンソールにエラーは表示されていません。
9
+
8
10
  ######現在の環境は下記の通りです。
9
11
 
10
12
  - ruby 2.6.5

5

コードの修正

2020/09/09 02:40

投稿

75ks
75ks

スコア4

title CHANGED
@@ -1,1 +1,1 @@
1
- 投稿画像にSwiperの設定ができない
1
+ ko投稿画像にSwiperの設定ができない
body CHANGED
@@ -66,10 +66,8 @@
66
66
  <% end %>
67
67
  </div>
68
68
  <% end %>
69
- <div class="swiper-pagination"></div>
70
- <div class="swiper-button-prev"></div>
69
+ <div class="swiper-button-prev swiper-button-black"></div>
71
- <div class="swiper-button-next"></div>
70
+ <div class="swiper-button-next swiper-button-black"></div>
72
- <div class="swiper-scrollbar"></div>
73
71
  </div>
74
72
  <div class="heart-btn" id="favorites_buttons_<%= post.id %>">
75
73
  <%= render partial: "shared/like", locals: {post: post} %>
@@ -87,26 +85,6 @@
87
85
  </div>
88
86
  ```
89
87
 
90
- ```indexcss
91
- -----省略------
92
-
93
- .post-image {
94
- margin-top: 12px;
95
- height: 33vh;
96
- width: 33vw;
97
- min-height: 350px;
98
- background-color: #f5f5f5;
99
- object-fit: contain;
100
- }
101
-
102
- .swiper-wrapper {
103
- display: flex;
104
- flex-direction: column;
105
- justify-content: center;
106
- align-items: center;
107
- }
108
- ```
109
-
110
88
  ```swiperjs
111
89
  var mySwiper = new Swiper('.swiper-container', {
112
90
  navigation: {
@@ -117,11 +95,6 @@
117
95
  ```
118
96
 
119
97
  ```applicationjs
120
- // This file is automatically compiled by Webpack, along with any other files
121
- // present in this directory. You're encouraged to place your actual application logic in
122
- // a relevant structure within app/javascript and only use these pack files to reference
123
- // that code so it'll be compiled.
124
-
125
98
  require("@rails/ujs").start()
126
99
  // require("turbolinks").start()
127
100
  require("@rails/activestorage").start()
@@ -129,12 +102,4 @@
129
102
  require('./preview')
130
103
  require('./favorite')
131
104
  require('./swiper')
132
-
133
- // Uncomment to copy all static images under ../images to the output folder and reference
134
- // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
135
- // or the `imagePath` JavaScript helper below.
136
- //
137
- // const images = require.context('../images', true)
138
- // const imagePath = (name) => images(name, true)
139
-
140
105
  ```

4

コードを修正

2020/09/09 02:38

投稿

75ks
75ks

スコア4

title CHANGED
File without changes
body CHANGED
@@ -2,19 +2,9 @@
2
2
  画像は2枚まで投稿できる仕様にしています。
3
3
 
4
4
  具体的には、2枚画像を投稿した場合は左右にスワイプさせて画像を切り替えたいです。
5
- 現在は、画像が縦に2枚並んでしまっている状態です。
6
- 前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。
7
5
 
8
- ######コンソールのエラーは下記の通りです。
6
+ 現在は、画像を複数投稿している状態でも表示されるのは1枚目のみで、前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。ボタンを押しても、左右にスワイプしても画像が変わりません。
9
7
 
10
- `Uncaught ReferenceError: Swiper is not defined
11
- at Object../app/javascript/packs/swiper.js (swiper.js:1)
12
- at __webpack_require__ (bootstrap:19)
13
- at Object../app/javascript/packs/application.js (application.js:12)
14
- at __webpack_require__ (bootstrap:19)
15
- at bootstrap:83
16
- at bootstrap:83`
17
-
18
8
  ######現在の環境は下記の通りです。
19
9
 
20
10
  - ruby 2.6.5
@@ -24,6 +14,7 @@
24
14
  - Web Server Nginx
25
15
  - Application Server Unicorn
26
16
  - Amazon S3
17
+ - Swiper
27
18
 
28
19
  ######現在のコードは下記の通りです。
29
20
 
@@ -37,7 +28,7 @@
37
28
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
38
29
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
39
30
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
40
-
31
+ <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
41
32
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
42
33
 
43
34
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
@@ -49,10 +40,10 @@
49
40
  <%= content_tag :div, message, class: name %>
50
41
  <% end %>
51
42
  <%= yield %>
52
- <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
53
43
  </body>
54
44
  </html>
55
45
 
46
+
56
47
  ```
57
48
 
58
49
  ```indexhtmlerb

3

タグを編集

2020/09/09 02:28

投稿

75ks
75ks

スコア4

title CHANGED
File without changes
body CHANGED
File without changes

2

読みやすい様に修正

2020/09/09 02:11

投稿

75ks
75ks

スコア4

title CHANGED
File without changes
body CHANGED
@@ -1,11 +1,11 @@
1
- SNSアプリを開発していて、投稿画像にSwiperを設定したいのですが、上手くできません。
1
+ SNSアプリを開発していて、投稿画像に`Swiper`を設定したいのですが、上手くできません。
2
2
  画像は2枚まで投稿できる仕様にしています。
3
3
 
4
4
  具体的には、2枚画像を投稿した場合は左右にスワイプさせて画像を切り替えたいです。
5
5
  現在は、画像が縦に2枚並んでしまっている状態です。
6
6
  前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。
7
7
 
8
- コンソールのエラーは下記の通りです。
8
+ ######コンソールのエラーは下記の通りです。
9
9
 
10
10
  `Uncaught ReferenceError: Swiper is not defined
11
11
  at Object../app/javascript/packs/swiper.js (swiper.js:1)
@@ -15,7 +15,7 @@
15
15
  at bootstrap:83
16
16
  at bootstrap:83`
17
17
 
18
- 現在の環境は下記の通りです。
18
+ ######現在の環境は下記の通りです。
19
19
 
20
20
  - ruby 2.6.5
21
21
  - rails 6.0.0
@@ -25,7 +25,7 @@
25
25
  - Application Server Unicorn
26
26
  - Amazon S3
27
27
 
28
- 現在のコードは下記の通りです。
28
+ ######現在のコードは下記の通りです。
29
29
 
30
30
  ```applicationhtmlerb
31
31
  <!DOCTYPE html>

1

エラー文の追加

2020/09/08 15:38

投稿

75ks
75ks

スコア4

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,16 @@
5
5
  現在は、画像が縦に2枚並んでしまっている状態です。
6
6
  前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。
7
7
 
8
+ コンソールのエラーは下記の通りです。
9
+
10
+ `Uncaught ReferenceError: Swiper is not defined
11
+ at Object../app/javascript/packs/swiper.js (swiper.js:1)
12
+ at __webpack_require__ (bootstrap:19)
13
+ at Object../app/javascript/packs/application.js (application.js:12)
14
+ at __webpack_require__ (bootstrap:19)
15
+ at bootstrap:83
16
+ at bootstrap:83`
17
+
8
18
  現在の環境は下記の通りです。
9
19
 
10
20
  - ruby 2.6.5