当サイトの記事には広告が含まれている場合があります

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

flexslider_key
 

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

今回使ったのはFlexSlider

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

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

img {
	object-fit: cover;
}

02_flexslider_after
 

実際に指定した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

 

くるりん

新入社員の頃にシステムエンジニアの会社に入社。その後、WEB制作系の仕事に転職しました。

くるりんをフォローする
html・cssjs・jQuery
スポンサーリンク
くるりんをフォローする
Memorandums