ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【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

1
2
3
4
5
6
7
8
9
10
<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>

css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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;
  -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;
}

jQuery

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(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,ページャーを設定することができますね!

関連記事

  • 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法2019年1月27日 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法
  • コピペでOK! jQueryで上下連動タブの切り替えをする方法2019年1月27日 コピペでOK! jQueryで上下連動タブの切り替えをする方法
  • 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法2017年4月19日 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法
  • 【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル2017年11月11日 【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル
  • 超簡単!cssを使って背景画像のみ透過にする方法2016年11月5日 超簡単!cssを使って背景画像のみ透過にする方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.