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

編集履歴

質問編集履歴

5

画像追加

2018/11/19 05:22

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ![イメージ説明](9a0fbfbaf3990c8d715bd2369a8cf668.png)
1
+ ![イメージ説明](5455fb456236b115af0d51c70c6db123.png)
2
2
  slick sliderで横幅100%/縦600pxのレスポンシブのスライダーを作成したいのですが、各スライドと画像は横幅1200px/縦600pxで最大値を固定したいです。
3
3
 
4
4
  横幅1200px以上の大きいディスプレイで確認すると、画像を1200px × 600pxで固定しているのでスライドに余白がでてしまいます。

4

修正

2018/11/19 05:22

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -7,6 +7,7 @@
7
7
  centerPaddingで余白を大きく取る方法しかないのでしょうか？
8
8
  よろしくお願い致します。
9
9
 
10
+ htnl
10
11
  ```
11
12
  <div class="top-slider">
12
13
  <div class="slide-elm">
@@ -27,6 +28,7 @@
27
28
  </div>
28
29
  ```
29
30
 
31
+ JS
30
32
  ```
31
33
  $('.top-slider').slick({
32
34
  infinite: true,

3

画像追加

2018/11/19 05:19

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,4 @@
1
+ ![イメージ説明](9a0fbfbaf3990c8d715bd2369a8cf668.png)
1
2
  slick sliderで横幅100%/縦600pxのレスポンシブのスライダーを作成したいのですが、各スライドと画像は横幅1200px/縦600pxで最大値を固定したいです。
2
3
 
3
4
  横幅1200px以上の大きいディスプレイで確認すると、画像を1200px × 600pxで固定しているのでスライドに余白がでてしまいます。

2

修正

2018/11/19 05:17

投稿

ysfree14
ysfree14

スコア19

title CHANGED
File without changes
body CHANGED
@@ -6,37 +6,39 @@
6
6
  centerPaddingで余白を大きく取る方法しかないのでしょうか？
7
7
  よろしくお願い致します。
8
8
 
9
- ```ここに言語を入力
9
+ ```
10
10
  <div class="top-slider">
11
- 　<div class="slide-elm">
11
+ <div class="slide-elm">
12
- 　　<a href="">
12
+ <a href="">
13
- 　　　<img src="sample.jpg" alt="">
13
+ 　 <img src="sample.jpg" alt="">
14
- 　　</a>
14
+ </a>
15
- 　</div>
15
+ </div>
16
- 　<div class="slide-elm">
16
+ <div class="slide-elm">
17
- 　　<a href="">
17
+ <a href="">
18
- 　　　<img src="sample.jpg" alt="">
18
+ 　 <img src="sample.jpg" alt="">
19
- 　　</a>
19
+ 　</a>
20
- 　</div>
20
+ </div>
21
- 　<div class="slide-elm">
21
+ <div class="slide-elm">
22
- 　　<a href="">
22
+ <a href="">
23
- 　　　<img src="sample.jpg" alt="">
23
+ <img src="sample.jpg" alt="">
24
- 　　</a>
24
+ </a>
25
- 　</div>
25
+ </div>
26
26
  </div>
27
+ ```
27
28
 
29
+ ```
28
30
  $('.top-slider').slick({
29
- 　infinite: true,
31
+ infinite: true,
30
- 　autoplay: true,
32
+ autoplay: true,
31
- dots: false,
33
+ dots: false,
32
- slidesToShow: 1,
34
+ slidesToShow: 1,
33
- slidesToScroll: 1,
35
+ slidesToScroll: 1,
34
- 　centerMode: true,
36
+ centerMode: true,
35
- responsive: [{
37
+ responsive: [{
36
- breakpoint: 768,
38
+ breakpoint: 768,
37
- settings: {
39
+ settings: {
38
- centerMode: false,
40
+ centerMode: false,
39
- }
41
+ }
40
- }]
42
+ }]
41
- });
43
+ });
42
44
  ```

1

誤字

2018/11/19 05:12

投稿

ysfree14
ysfree14

スコア19

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