teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたいです

編集履歴

質問編集履歴

7

追記2追加

2021/05/27 16:03

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -163,3 +163,15 @@
163
163
  [【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたい](https://qiita.com/TMTN/questions/ca8631c7ae41258cda78)
164
164
 
165
165
  [【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたい](https://ja.stackoverflow.com/questions/76062/vue-vue-slick-carousel-%e3%81%ab%e3%81%a6v-for%e3%81%a7%e3%83%ab%e3%83%bc%e3%83%97%e3%81%97%e3%81%9f%e3%83%aa%e3%82%b9%e3%83%88%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%81%9f%e3%81%84)
166
+
167
+
168
+
169
+ #追記2
170
+
171
+
172
+
173
+ 同じような問題を抱える質問がありまして、そちらを確認しましたが、それでも原因が分からない状況です。。
174
+
175
+
176
+
177
+ [v-forが完了後にslickを実行したい](https://teratail.com/questions/173143)

6

内容修正

2021/05/27 16:03

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -160,4 +160,6 @@
160
160
 
161
161
 
162
162
 
163
- [【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたいです](https://qiita.com/TMTN/questions/ca8631c7ae41258cda78)
163
+ [【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたい](https://qiita.com/TMTN/questions/ca8631c7ae41258cda78)
164
+
165
+ [【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたい](https://ja.stackoverflow.com/questions/76062/vue-vue-slick-carousel-%e3%81%ab%e3%81%a6v-for%e3%81%a7%e3%83%ab%e3%83%bc%e3%83%97%e3%81%97%e3%81%9f%e3%83%aa%e3%82%b9%e3%83%88%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%81%9f%e3%81%84)

5

内容修正

2021/05/27 15:40

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,11 @@
8
8
 
9
9
  <List v-for="(list, index) in listData" :index="index" :list="list" :key="list.id"/>で
10
10
 
11
+ 受け取ったリストを追加されるたびにスライダーへ反映させたいのですが、
12
+
11
- 受け取ったリストを追加されるたびにスライダーへ反映させたいのですが、コンポーネントの<List>を<VueSlickCarousel>タグで囲っているので<List>がひとつとして認識されているためか、以下のようにsettingにて3枚表示にしているのですが、適用されない状況です。。（矢印もドットも適用されていないです。。）
13
+ コンポーネントの<List>を<VueSlickCarousel>タグで囲っているので<List>がひとつとして認識されているためか、
14
+
15
+ 以下のようにsettingにて3枚表示にしているのですが、適用されない状況です。。（矢印もドットも適用されていないです。。）
12
16
 
13
17
 
14
18
 

4

追記1追加

2021/05/27 10:25

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -145,3 +145,15 @@
145
145
 
146
146
 
147
147
  vue-slick-carouselとして問題はないように見受けられます。
148
+
149
+
150
+
151
+ #追記1
152
+
153
+
154
+
155
+ 数日回答を得られなかった為、以下サイトに掲載させて頂いております。
156
+
157
+
158
+
159
+ [【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたいです](https://qiita.com/TMTN/questions/ca8631c7ae41258cda78)

3

修正

2021/05/25 13:49

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -68,6 +68,30 @@
68
68
 
69
69
  },
70
70
 
71
+ methods: {
72
+
73
+ next() {
74
+
75
+ this.$refs.slick.next();
76
+
77
+ },
78
+
79
+ prev() {
80
+
81
+ this.$refs.slick.prev();
82
+
83
+ },
84
+
85
+ reInit() {
86
+
87
+ this.$nextTick(() => {
88
+
89
+ this.$refs.slick.reSlick();
90
+
91
+ });
92
+
93
+ },
94
+
71
95
  ```
72
96
 
73
97
  ```css
@@ -120,4 +144,4 @@
120
144
 
121
145
 
122
146
 
123
- vue-slick-carouselとして問題は内容に見受けられます。
147
+ vue-slick-carouselとして問題はないように見受けられます。

2

内容修正

2021/05/24 07:49

投稿

TMTN
TMTN

スコア53

test CHANGED
@@ -1 +1 @@
1
- 【Vue】vue-slickカルーセルスライダーを導入したいが適用されない。
1
+ 【Vue】vue-slick-carousel にてv-forでループしたリストを表示させたいです
test CHANGED
@@ -1,56 +1,20 @@
1
- #vue-slickが適用されない。
1
+ #vue-slick-carousel にてv-forでループしたリストを表示させたいです
2
2
 
3
3
 
4
4
 
5
- ![イメージ説明](20de2ce1b2975446529a15a9bbce22c4.png)
5
+ ![イメージ説明](d64b66f1516316a1b77797c6c718fa25.png)
6
6
 
7
7
 
8
8
 
9
- jqueryではslickは使ったことがあり、[Github](https://github.com/staskjs/vue-slick)を参考に
9
+ <List v-for="(list, index) in listData" :index="index" :list="list" :key="list.id"/>で
10
10
 
11
- 下記のように記述してみたのですが、適用され内容に感じます。。
11
+ 受け取ったリストを追加されるたびにスライダーへ反映させたいのですが、コンポーネントの<List>を<VueSlickCarousel>タグで囲っているので<List>がひとつとして認識されているためか、以下のようにsettingにて3枚表示にしているのですが、適用されない状況です。。（矢印もドットも適用されていないです。。）
12
12
 
13
13
 
14
14
 
15
- エラーも特に出てなく、slickOptionsのオプションすらも適用されておりません。。
15
+ v-forにて受け取ったリストを追加されるたびにスライダーへ反映させるためにはどのように
16
16
 
17
-
18
-
19
- ```packagejson
17
+ 記述したらよろしいのでしょうか。。
20
-
21
- "dependencies": {
22
-
23
- "@fortawesome/fontawesome-svg-core": "^1.2.35",
24
-
25
- "@fortawesome/free-solid-svg-icons": "^5.15.3",
26
-
27
- "@fortawesome/vue-fontawesome": "^2.0.2",
28
-
29
- "@innologica/vue-dropdown-menu": "^0.1.4",
30
-
31
-
32
-
33
- ~ 省略 ~
34
-
35
-
36
-
37
- "firebase": "^8.3.1",
38
-
39
- "jquery": "^3.6.0",
40
-
41
- "vue": "^2.6.11",
42
-
43
- "vue-carousel": "^0.18.0",
44
-
45
- "vue-slick": "^1.1.16",
46
-
47
- },
48
-
49
- ```
50
-
51
-
52
-
53
- もちろんですが、インストールも実施済みです、
54
18
 
55
19
 
56
20
 
@@ -64,23 +28,23 @@
64
28
 
65
29
  <div class="profile-posts">
66
30
 
67
- <slick ref="slick" :options="slickOptions" class="slick-outer">
31
+ <VueSlickCarousel v-bind="settings">
68
32
 
69
- <List
33
+ <List
70
34
 
71
- v-for="(list, index) in listData"
35
+ v-for="(list, index) in listData"
72
36
 
73
- :index="index"
37
+ :index="index"
74
38
 
75
- :list="list"
39
+ :list="list"
76
40
 
77
- :key="list.id"
41
+ :key="list.id"
78
42
 
79
- />
43
+ />
80
44
 
81
- </slick>
45
+ </VueSlickCarousel>
82
46
 
83
- </div>
47
+ </div>
84
48
 
85
49
  ```
86
50
 
@@ -88,50 +52,72 @@
88
52
 
89
53
  ```js
90
54
 
91
- export default {
55
+ listData: [],
92
56
 
93
- data() {
57
+ settings: {
94
58
 
95
- return {
59
+ dots: true,
96
60
 
97
- 　　　　listData: [],
61
+ infinite: false,
98
-
99
- 　slickOptions: {
100
62
 
101
63
  slidesToShow: 3,
102
64
 
103
- slidesToScroll: 1,
65
+ slidesToScroll: 3,
66
+
67
+ initialSlide: 0,
104
68
 
105
69
  },
106
70
 
71
+ ```
72
+
73
+ ```css
74
+
75
+ .slick-slider{
76
+
77
+ width: 90%;
78
+
79
+ }
107
80
 
108
81
 
109
- components: {
110
-
111
- Header,
112
-
113
- List,
114
-
115
- Slick,
116
-
117
- },
118
82
 
119
83
  ```
120
84
 
121
85
 
122
86
 
123
- ```css
87
+ #試したこと
124
88
 
125
- .slick-slider {
126
89
 
127
- width: 90%;
128
90
 
129
- display: flex;
91
+ ![イメージ説明](a4538888e16a0f65c7ffad467a38c45f.png)
130
92
 
131
- justify-content: center;
132
93
 
133
- flex-wrap: wrap;
134
94
 
95
+
96
+
135
- }
97
+ ```ここに言語を入力
98
+
99
+ <VueSlickCarousel v-bind="settings">
100
+
101
+ <div><h3>1</h3></div>
102
+
103
+ <div><h3>2</h3></div>
104
+
105
+ <div><h3>3</h3></div>
106
+
107
+ <div><h3>4</h3></div>
108
+
109
+ <div><h3>5</h3></div>
110
+
111
+ </VueSlickCarousel>
136
112
 
137
113
  ```
114
+
115
+
116
+
117
+ 少し雑ですが、<List>コンポーネント部分を上記のようにわかりやすく数字に置き換えてみたら
118
+
119
+ スライダーとしても機能しており、矢印も反映され、３枚表示になっております。
120
+
121
+
122
+
123
+ vue-slick-carouselとして問題は内容に見受けられます。

1

内容修正

2021/05/24 06:58

投稿

TMTN
TMTN

スコア53

test CHANGED
@@ -1 +1 @@
1
- 【Vue】vue-slickが適用されない。
1
+ 【Vue】vue-slickカルーセルスライダーを導入したいが適用されない。
test CHANGED
File without changes