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

編集履歴

質問編集履歴

8

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

2020/09/09 02:58

投稿

75ks
75ks

スコア4

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

7

エラー文の追加

2020/09/09 02:58

投稿

75ks
75ks

スコア4

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,21 @@
12
12
 
13
13
 
14
14
 
15
+ ######現在のエラー文は下記の通りです。
16
+
15
- コンソールにエラーは表示されていません。
17
+ 画像をスワイプした時に表示されます。
18
+
19
+
20
+
21
+ `Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
22
+
23
+ at getTranslate (utils.js:30)
24
+
25
+ at Swiper.getSwiperTranslate [as getTranslate] (getTranslate.js:15)
26
+
27
+ at Swiper.onTouchMove (onTouchMove.js:124)`
28
+
29
+
16
30
 
17
31
 
18
32
 
@@ -178,15 +192,19 @@
178
192
 
179
193
  ```swiperjs
180
194
 
195
+ document.addEventListener("DOMContentLoaded", function(){
196
+
181
- var mySwiper = new Swiper('.swiper-container', {
197
+ var mySwiper = new Swiper('.swiper-container', {
182
-
198
+
183
- navigation: {
199
+ navigation: {
184
-
200
+
185
- nextEl: '.swiper-button-next',
201
+ nextEl: '.swiper-button-next',
186
-
202
+
187
- prevEl: '.swiper-button-prev'
203
+ prevEl: '.swiper-button-prev'
188
-
204
+
189
- }
205
+ }
206
+
207
+ });
190
208
 
191
209
  });
192
210
 

6

エラーについての追記

2020/09/09 02:54

投稿

75ks
75ks

スコア4

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,10 @@
12
12
 
13
13
 
14
14
 
15
+ コンソールにエラーは表示されていません。
16
+
17
+
18
+
15
19
  ######現在の環境は下記の通りです。
16
20
 
17
21
 

5

コードの修正

2020/09/09 02:40

投稿

75ks
75ks

スコア4

test CHANGED
@@ -1 +1 @@
1
- 投稿画像にSwiperの設定ができない
1
+ ko投稿画像にSwiperの設定ができない
test CHANGED
@@ -134,13 +134,9 @@
134
134
 
135
135
  <% end %>
136
136
 
137
- <div class="swiper-pagination"></div>
138
-
139
- <div class="swiper-button-prev"></div>
137
+ <div class="swiper-button-prev swiper-button-black"></div>
140
-
138
+
141
- <div class="swiper-button-next"></div>
139
+ <div class="swiper-button-next swiper-button-black"></div>
142
-
143
- <div class="swiper-scrollbar"></div>
144
140
 
145
141
  </div>
146
142
 
@@ -176,46 +172,6 @@
176
172
 
177
173
 
178
174
 
179
- ```indexcss
180
-
181
- -----省略------
182
-
183
-
184
-
185
- .post-image {
186
-
187
- margin-top: 12px;
188
-
189
- height: 33vh;
190
-
191
- width: 33vw;
192
-
193
- min-height: 350px;
194
-
195
- background-color: #f5f5f5;
196
-
197
- object-fit: contain;
198
-
199
- }
200
-
201
-
202
-
203
- .swiper-wrapper {
204
-
205
- display: flex;
206
-
207
- flex-direction: column;
208
-
209
- justify-content: center;
210
-
211
- align-items: center;
212
-
213
- }
214
-
215
- ```
216
-
217
-
218
-
219
175
  ```swiperjs
220
176
 
221
177
  var mySwiper = new Swiper('.swiper-container', {
@@ -236,16 +192,6 @@
236
192
 
237
193
  ```applicationjs
238
194
 
239
- // This file is automatically compiled by Webpack, along with any other files
240
-
241
- // present in this directory. You're encouraged to place your actual application logic in
242
-
243
- // a relevant structure within app/javascript and only use these pack files to reference
244
-
245
- // that code so it'll be compiled.
246
-
247
-
248
-
249
195
  require("@rails/ujs").start()
250
196
 
251
197
  // require("turbolinks").start()
@@ -260,20 +206,4 @@
260
206
 
261
207
  require('./swiper')
262
208
 
263
-
264
-
265
- // Uncomment to copy all static images under ../images to the output folder and reference
266
-
267
- // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
268
-
269
- // or the `imagePath` JavaScript helper below.
270
-
271
- //
272
-
273
- // const images = require.context('../images', true)
274
-
275
- // const imagePath = (name) => images(name, true)
276
-
277
-
278
-
279
- ```
209
+ ```

4

コードを修正

2020/09/09 02:38

投稿

75ks
75ks

スコア4

test CHANGED
File without changes
test CHANGED
@@ -6,29 +6,9 @@
6
6
 
7
7
  具体的には、2枚画像を投稿した場合は左右にスワイプさせて画像を切り替えたいです。
8
8
 
9
- 現在は、画像が縦に2枚並んでしまっている状態です。
9
+
10
-
10
+
11
- 前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。
11
+ 現在は、画像を複数投稿している状態でも表示されるのは1枚目のみで、前、次にスワイプさせるボタンだけ画像の左右に表示されている状態です。ボタンを押しても、左右にスワイプしても画像が変わりません。
12
-
13
-
14
-
15
- ######コンソールのエラーは下記の通りです。
16
-
17
-
18
-
19
- `Uncaught ReferenceError: Swiper is not defined
20
-
21
- at Object../app/javascript/packs/swiper.js (swiper.js:1)
22
-
23
- at __webpack_require__ (bootstrap:19)
24
-
25
- at Object../app/javascript/packs/application.js (application.js:12)
26
-
27
- at __webpack_require__ (bootstrap:19)
28
-
29
- at bootstrap:83
30
-
31
- at bootstrap:83`
32
12
 
33
13
 
34
14
 
@@ -50,6 +30,8 @@
50
30
 
51
31
  - Amazon S3
52
32
 
33
+ - Swiper
34
+
53
35
 
54
36
 
55
37
  ######現在のコードは下記の通りです。
@@ -76,7 +58,7 @@
76
58
 
77
59
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
78
60
 
79
-
61
+ <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
80
62
 
81
63
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
82
64
 
@@ -100,14 +82,14 @@
100
82
 
101
83
  <%= yield %>
102
84
 
103
- <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
104
-
105
85
  </body>
106
86
 
107
87
  </html>
108
88
 
109
89
 
110
90
 
91
+
92
+
111
93
  ```
112
94
 
113
95
 

3

タグを編集

2020/09/09 02:28

投稿

75ks
75ks

スコア4

test CHANGED
File without changes
test CHANGED
File without changes

2

読みやすい様に修正

2020/09/09 02:11

投稿

75ks
75ks

スコア4

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- SNSアプリを開発していて、投稿画像にSwiperを設定したいのですが、上手くできません。
1
+ SNSアプリを開発していて、投稿画像に`Swiper`を設定したいのですが、上手くできません。
2
2
 
3
3
  画像は2枚まで投稿できる仕様にしています。
4
4
 
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- コンソールのエラーは下記の通りです。
15
+ ######コンソールのエラーは下記の通りです。
16
16
 
17
17
 
18
18
 
@@ -32,7 +32,7 @@
32
32
 
33
33
 
34
34
 
35
- 現在の環境は下記の通りです。
35
+ ######現在の環境は下記の通りです。
36
36
 
37
37
 
38
38
 
@@ -52,7 +52,7 @@
52
52
 
53
53
 
54
54
 
55
- 現在のコードは下記の通りです。
55
+ ######現在のコードは下記の通りです。
56
56
 
57
57
 
58
58
 

1

エラー文の追加

2020/09/08 15:38

投稿

75ks
75ks

スコア4

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,26 @@
12
12
 
13
13
 
14
14
 
15
+ コンソールのエラーは下記の通りです。
16
+
17
+
18
+
19
+ `Uncaught ReferenceError: Swiper is not defined
20
+
21
+ at Object../app/javascript/packs/swiper.js (swiper.js:1)
22
+
23
+ at __webpack_require__ (bootstrap:19)
24
+
25
+ at Object../app/javascript/packs/application.js (application.js:12)
26
+
27
+ at __webpack_require__ (bootstrap:19)
28
+
29
+ at bootstrap:83
30
+
31
+ at bootstrap:83`
32
+
33
+
34
+
15
35
  現在の環境は下記の通りです。
16
36
 
17
37