teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問slick slider 横幅100%の時に画像を中央に寄せて表示する

編集履歴

質問編集履歴

5

画像追加

2018/11/19 05:22

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ![イメージ説明](9a0fbfbaf3990c8d715bd2369a8cf668.png)
1
+ ![イメージ説明](5455fb456236b115af0d51c70c6db123.png)
2
2
 
3
3
  slick sliderで横幅100%/縦600pxのレスポンシブのスライダーを作成したいのですが、各スライドと画像は横幅1200px/縦600pxで最大値を固定したいです。
4
4
 

4

修正

2018/11/19 05:22

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,8 @@
15
15
  よろしくお願い致します。
16
16
 
17
17
 
18
+
19
+ htnl
18
20
 
19
21
  ```
20
22
 
@@ -56,6 +58,8 @@
56
58
 
57
59
 
58
60
 
61
+ JS
62
+
59
63
  ```
60
64
 
61
65
  $('.top-slider').slick({

3

画像追加

2018/11/19 05:19

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ![イメージ説明](9a0fbfbaf3990c8d715bd2369a8cf668.png)
2
+
1
3
  slick sliderで横幅100%/縦600pxのレスポンシブのスライダーを作成したいのですが、各スライドと画像は横幅1200px/縦600pxで最大値を固定したいです。
2
4
 
3
5
 

2

修正

2018/11/19 05:17

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,70 +14,74 @@
14
14
 
15
15
 
16
16
 
17
- ```ここに言語を入力
17
+ ```
18
18
 
19
19
  <div class="top-slider">
20
20
 
21
- 　<div class="slide-elm">
21
+ <div class="slide-elm">
22
22
 
23
- 　　<a href="">
23
+ <a href="">
24
24
 
25
- 　　　<img src="sample.jpg" alt="">
25
+ 　 <img src="sample.jpg" alt="">
26
26
 
27
- 　　</a>
27
+ </a>
28
28
 
29
- 　</div>
29
+ </div>
30
30
 
31
- 　<div class="slide-elm">
31
+ <div class="slide-elm">
32
32
 
33
- 　　<a href="">
33
+ <a href="">
34
34
 
35
- 　　　<img src="sample.jpg" alt="">
35
+ 　 <img src="sample.jpg" alt="">
36
36
 
37
- 　　</a>
37
+ 　</a>
38
38
 
39
- 　</div>
39
+ </div>
40
40
 
41
- 　<div class="slide-elm">
41
+ <div class="slide-elm">
42
42
 
43
- 　　<a href="">
43
+ <a href="">
44
44
 
45
- 　　　<img src="sample.jpg" alt="">
45
+ <img src="sample.jpg" alt="">
46
46
 
47
- 　　</a>
47
+ </a>
48
48
 
49
- 　</div>
49
+ </div>
50
50
 
51
51
  </div>
52
52
 
53
+ ```
53
54
 
55
+
56
+
57
+ ```
54
58
 
55
59
  $('.top-slider').slick({
56
60
 
57
- 　infinite: true,
61
+ infinite: true,
58
62
 
59
- 　autoplay: true,
63
+ autoplay: true,
60
64
 
61
- dots: false,
65
+ dots: false,
62
66
 
63
- slidesToShow: 1,
67
+ slidesToShow: 1,
64
68
 
65
- slidesToScroll: 1,
69
+ slidesToScroll: 1,
66
70
 
67
- 　centerMode: true,
71
+ centerMode: true,
68
72
 
69
- responsive: [{
73
+ responsive: [{
70
74
 
71
- breakpoint: 768,
75
+ breakpoint: 768,
72
76
 
73
- settings: {
77
+ settings: {
74
78
 
75
- centerMode: false,
79
+ centerMode: false,
76
80
 
77
- }
81
+ }
78
82
 
79
- }]
83
+ }]
80
84
 
81
- });
85
+ });
82
86
 
83
87
  ```

1

誤字

2018/11/19 05:12

投稿

ysfree14
ysfree14

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- slick sliderで横幅100%と縦600pxのレスポンシブのスライダーを作成したいのですが、各スライドと画像は横幅1200px縦は600pxで最大値を固定したいです。
1
+ slick sliderで横幅100%/縦600pxのレスポンシブのスライダーを作成したいのですが、各スライドと画像は横幅1200px/縦600pxで最大値を固定したいです。
2
2
 
3
3
 
4
4
 
@@ -6,7 +6,7 @@
6
6
 
7
7
  左右をチラ見せするためにcenterMode: true,をしているのですが、
8
8
 
9
- ウィンドウを大きくした際に、各スライドの横幅最大値を1200pxにして常に中央配置にするにはどうすればいいのでしょうか？
9
+ ウィンドウを大きくした際に、各スライドの横幅最大値を1200pxにして常に中央配置にして左右に前後のスライダーを表示させるにはどうすればいいのでしょうか？
10
10
 
11
11
  centerPaddingで余白を大きく取る方法しかないのでしょうか？
12
12