【jQuery】ファーストビュー（画面全体）に背景画像をスライダーで表示させる方法（prev , next , ページャー付き）

2017年11月10日

スポンサードサーチ

【デモ】ファーストビュー全体に背景画像をスライダーで表示

https://hiroyayabiku.github.io/bk_slider_mv100vh/

ソースのダウンロードはこちら

https://github.com/HiroyaYabiku/bk_slider_mv100vh

メインビジュアルのコーディングで、ファーストビュー全体を画像表示することがありますが、スライダーでかつprev , next , ページャー付きのサンプルがweb上に見当たらなかったので作成したサンプルをご紹介します。今回bxsliderプラグインを使用して作成しました、ブラウザの高さ、幅など可変にも対応しています。

スポンサードサーチ

html、css、JQueryのコード

html

<body>
      <ul id="slider">
        <li style="background-image:url(./img/mv01.jpg);"></li>
        <li style="background-image:url(./img/mv02.jpg);"></li>
        <li style="background-image:url(./img/mv03.jpg);"></li>
      </ul>

    <script src="./js/jquery.js"></script>
    <script src="./js/jquery.bxslider.js"></script>
</body>

<body>

</ul>

</body>

css

/* スライダー
----------------------------------- */
#slider li {
  height: 100vh;
  background: center/cover no-repeat;
}


/* ページャー
----------------------------------- */
.bx-default-pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  z-index: 100;
  bottom: 40px;
  right: 0;
  left: 0;
  margin: auto;
}
.bx-pager-item a {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 50%;
  text-indent: 100%;
  cursor: pointer;
}
/* active時の色 */
.bx-pager-item .active {
  background-color: #b63726;
}


/* prev , nextボタン （コントローラー）
----------------------------------- */
.bx-prev,
.bx-next {
  position: absolute;
  z-index: 120;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto;
  border: 1px solid #fff;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.bx-prev:before,
.bx-next:before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: left;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  content: "";
}
.bx-prev:after,
.bx-next:after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  height: 1px;
  margin: auto;
  background-color: #fff;
  -webkit-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  content: "";
}
.bx-prev:hover:before,
.bx-next:hover:before {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: none;
  -webkit-filter: none;
          filter: none;
}
.bx-prev:hover:after,
.bx-next:hover:after {
  width: 0;
  color: #fff;
  -webkit-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.bx-prev {
  left: 20px;
}
.bx-prev:before {
  border-right: 0;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.bx-prev:after {
  left: -10px;
}
.bx-next {
  right: 20px;
}
.bx-next:after {
  right: -10px;
}
.bx-next:hover {
  -webkit-transform-origin: right;
  transform-origin: right;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

/* スライダー

----------------------------------- */

#slider li {

height: 100vh;

background: center/cover no-repeat;

}

/* ページャー

----------------------------------- */

.bx-default-pager {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

position: absolute;

z-index: 100;

bottom: 40px;

right: 0;

left: 0;

margin: auto;

}

.bx-pager-item a {

display: inline-block;

width: 10px;

height: 10px;

margin: 0 8px;

overflow: hidden;

background-color: #fff;

border-radius: 50%;

text-indent: 100%;

cursor: pointer;

}

/* active時の色 */

.bx-pager-item .active {

background-color: #b63726;

}

/* prev , nextボタン（コントローラー）

----------------------------------- */

.bx-prev,

.bx-next {

position: absolute;

z-index: 120;

top: 0;

bottom: 0;

width: 40px;

height: 40px;

margin: auto;

border: 1px solid #fff;

cursor: pointer;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.bx-prev:before,

.bx-next:before {

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 7px;

height: 7px;

margin: auto;

border-right: 1px solid #fff;

border-bottom: 1px solid #fff;

opacity: 0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: left;

-webkit-transform-origin: bottom;

transform-origin: bottom;

-webkit-transition: all 0.5s;

transition: all 0.5s;

content: "";

}

.bx-prev:after,

.bx-next:after {

display: block;

position: absolute;

top: 0;

bottom: 0;

width: 16px;

height: 1px;

margin: auto;

background-color: #fff;

-webkit-transition: all 0.3s;

transition: all 0.3s;

content: "";

}

.bx-prev:hover:before,

.bx-next:hover:before {

opacity: 1;

filter: alpha(opacity=100);

-ms-filter: none;

-webkit-filter: none;

filter: none;

}

.bx-prev:hover:after,

.bx-next:hover:after {

width: 0;

color: #fff;

-webkit-transform: scaleX(0);

transform: scaleX(0);

-webkit-transform-origin: left;

transform-origin: left;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.bx-prev {

left: 20px;

}

.bx-prev:before {

border-right: 0;

border-left: 1px solid #fff;

border-bottom: 1px solid #fff;

opacity: 0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

.bx-prev:after {

left: -10px;

}

.bx-next {

right: 20px;

}

.bx-next:after {

right: -10px;

}

.bx-next:hover {

-webkit-transform-origin: right;

transform-origin: right;

}

jQuery

$(function() {
  // bxSliderを起動
  $('#slider').bxSlider({
    mode: 'fade',
    speed: 1000,
    pause: 4500,
    auto: true,
    pager: true,
    controls: true,
    prevText: '',
    nextText: '',
    hideControlOnEnd: true,
    touchEnabled: false
  });

  // 画面リサイズ時にスライダーの幅を再設定
  $(window).on('resize', function(){
    var $winWidth = $(window).width();
    var sliderTarget = $('#slider li').width();
    $('#slider li').width($winWidth)
  });
});

$(function() {

// bxSliderを起動

$('#slider').bxSlider({

mode: 'fade',

speed: 1000,

pause: 4500,

auto: true,

pager: true,

controls: true,

prevText: '',

nextText: '',

hideControlOnEnd: true,

touchEnabled: false

});

// 画面リサイズ時にスライダーの幅を再設定

$(window).on('resize', function(){

var $winWidth = $(window).width();

var sliderTarget = $('#slider li').width();

$('#slider li').width($winWidth)

});

ページャーのcssが長くなってしまっていますが、アニメーションの記述を削除して頂けたらスッキリするかと思います。

解説

jquery.bxslider.jsプラグインを使用します。
html、css、jQueryともポイントは非常にシンプルで下記のみ重要な点を押さえていれば簡単に実装できます。

htmlは、sliderのリストにstyle属性で背景に画像を指定してあげます。
cssは、スライダー画像の位置とサイズをcenter、coverなど調整し、heightを100vhに設定します。
jQueryは、bxsliderを起動する記述し、画面リサイズ時にスライダーの幅を再設定する。

上記の記述となります。
cssはお好みで適宜変更すればよいので、これで簡単にファーストビュー全体に背景画像をスライダーで表示させ、尚且つprev,next,ページャーを設定することができますね！