FlexSliderを使って高さを保ったまま幅いっぱいにスライダーさせる

 

レスポンシブにも対応して画面いっぱいスライダーさせることは今までもやってきたんですが、高さを保ったまま幅いっぱいに画像をスライドするのにてこずったのでメモしておきます。

今回使ったのはFlexSlider

高さを保ったままで横幅いっぱいに画像を表示するといびつな形になってしまいました。

 

端が切れてもいいので画像比率を保ったまま表示するために、imgにcssで下記を追加したらうまく表示されました。

img {
	object-fit: cover;
}

 

実際に指定したhtml、css、jsは下記のとおりです。
いらない指定もあるかもしれませんが、とりあえずこれでうまく動きました。

HTML

<div id="container" class="cf">
  <div id="main" role="main">
    <section class="slider">
      <div class="flexslider">
        <ul class="slides">
          <li>
            <img src="images/img01.jpg" />
          </li>
          <li>
            <img src="images/img02.jpg" />
          </li>
          <li>
            <img src="images/img03.jpg" />
          </li>
          <li>
            <img src="images/img04.jpg" />
          </li>
        </ul>
      </div>
    </section>
  </div>
</div>

 

CSS

#container{
	position: relative;
	text-align: center;
}

.flexslider {
	position:absolute;
	left: 0;
	right: 0;
	border: 0;
	width: 100%;
	height: 100%;
}
.slides{
	margin: 0;
	padding: 0;
}
#main img {
	min-height: 500px;
	position: relative;
	vertical-align: bottom;
	object-fit: cover;
}
#main  ul {
	margin: 0;
	padding: 0;
}

.flex-control-nav {
	bottom: 20px!important;
	right: 0;
	text-align: center;
	width: 100%!important;
	z-index: 100;
}

 

JS

<script type="text/javascript">
  $(window).load(function(){
    $('.flexslider').flexslider({
      animation: "slide",
      directionNav: false
    });
  });
</script>

JSは、左右の矢印を表示すると右に余計な空白が表示されたので、表示させないようにdirectionNavを指定しました。
 

実際のデモページは下記に載せておきます。

DEMO