Slick.jsで、どのサイズの画面でも1枚ずつwidth:100%でスライドしたいです。

Question

###前提・実現したいこと
モバイルファーストのサイトを作っています。
ブレイクポイントをmin-width:960pxにしています。
すると、960px以上の時、それまで幅いっぱいに画面が表示してスライドしていたのに
小さなサイズになり、更に左に寄ってスライドを始めます。
９６０px以上になっても横幅いっぱいに表示されるけど、画像の幅（１０００ｐｘ）以上になったら画像の幅は引き延ばされないようにするにはどうすればよいでしょうか？

更に、上部のヘッダーはwidth:960px以上の時はスクロールしても上部に固定されているようにしたいのですが、position:fixedにしたらスライダーの下に隠れてしまうようで表示されなくなってしまいます。

下記にURLを記載しますので、どうかご指導頂けますでしょうか。
http://kapi-matsu.fakefur.jp/slickqanda/
###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[Lhankor_Mhy]

画像が引き伸ばされず、横幅いっぱいに表示されている状態は矛盾していませんか。どうしても空間が空くと思いますが。

[mico]

Lhankor_Mhyさま　わかりづらい文で申し訳ありません。1000px以上になると、それ以上拡大されないようにしたかったのです。

[Lhankor_Mhy]

うーんと、ページの幅が1200pxで画像が1000pxより引き伸ばされないなら、どうしても200px余ってしまうので横幅いっぱいにならないのではありませんか？　という話なのですが。

[Lhankor_Mhy]

あ、解決してるのか。じゃあいいや。

[mico]

Lhankor_Mhyさま　気にかけてくださって、ありがとうございました。初心者なので要領の得ない文になってしまいました事、お詫びいたします。これからもこちらに質問させて頂きたいと思いますので、またお世話になる機会がありましたらよろしくご指導ください。

[Lhankor_Mhy]

下にもぐってしまう件も、z-indexで解決できたようですね。お疲れ様でした。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

[mico]

kei344様 そうですね、スマートな記述は沢山コーディングをこなして身につけていこうと思います。これからも気づかないところ色々あるかと思いますが、どうぞ宜しくご教授下さい。

Answer 1

スライドの容れ物である親要素のmax-widｔｈを1000pxにし、
マージンを margin:0 auto;とし、画像の横幅を100%;とすれば多分実現出来ると思いますよ。

Comments

[mico]

shaak様
CSSを頂いたアドバイス通りにしましたら、希望通りに動いてくれました！
本当にありがとうございます。
そして、headerの固定の件ですが、position:fixedにするとどうしてもスライダーの下に潜ってしまいます。。
こちらにもアドバイス頂けましたら大変助かります。

[mico]

度々申し訳ありません。下に潜ることはスライダーの親要素にmargin-topをつけて回避できました。手直ししたものをアップいたします。
もし、このCSSよりもスマートな記述方法がありましたらご教授頂けると嬉しいです。