bxSliderプラグイン
bxSliderは複数枚の画像をきりかえるjQueryプラグインです。
jqueryはある程度きまった動作をするプラグインが豊富にあり、それを利用することで制作の時間を短縮することができます。
プラグインのダウンロード
プラグインのダウンロードは公式ページからリンクサイトに飛び、ダウンロードします。
git hubからのダウンロード
最近のプラグインは公式サイトに置かず、開発コードがおいてある「github」に置いてあることが多いので、ダウンロードの仕方も覚えておきましょう。
bxSliderの導入
ダウンロードしたzipファイルを解凍します。
解凍すると画像のような構成のフォルダが作成されます。
使用するのはdistフォルダ内にあるファイルです。
その他は必要がある場合に使用するようにしましょう。
distフォルダ内から最低限必要なファイルだけ取り出します。
２つファイルと１つのフォルダをコピーしておきます。
自分のフォルダへの設置
自分のフォルダにcssフォルダとjsフォルダを新規で作成し、先ほど指定したファイルをコピーします。
コピーしたcssファイルとjsファィルはそれぞれのフォルダ内に移動します。
サンプル素材のダウンロード
ページ内の記述方法
ページ内にプラグインを導入するには、cssファイルとjsファイルを
読み込ませる必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/jquery.bxslider.min.js"></script>
</body>
</html>次にスライド画像を表示させ、class名を指定したタグ内にまとめて配置します。
<div class="slider">
<div class="img01"><img src="img/slide01.jpg" alt="slide-image01"></div>
<div class="img02"><img src="img/slide02.jpg" alt="slide-image02"></div>
<div class="img03"><img src="img/slide03.jpg" alt="slide-image03"></div>
</div>
最後にプラグインの開始メソッドを呼び出します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/jquery.bxslider.min.js"></script>
<script>
$(function(){
$('.slider').bxSlider();
});
</script>
</body>
</html>画像制作
bxSlider用の画像を制作してみましょう
マンゴースイーツ大特集
フルーツパラダイスをご注文のお客様のみお楽しみいただける、
スペシャルショートマンゴーやマンゴープリンなどの
限定メニューをご用意いたしました。
スタンダードバイキング
３０種類以上のスイーツとフード・ドリンクを
ご提供するバイキングセット
選べるバイキングコース
スイーツパラダイスは、約30種以上の
スイーツや生パスタ・カレー・フレッシュサラダ・
スープなど、お好きなものをお好きなだけ食べられる
「バイキング」をご提供しています。
Sweets Paradise12月22日-bxSlider-
HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>bxSlider演習</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>bxSlider演習</h1>
<ul class="slide">
<li><img src="img/image01.jpg" alt="ケーキ画像"></li>
<li><img src="img/image02.jpg" alt="ケーキ画像"></li>
<li><img src="img/image03.jpg" alt="ケーキ画像"></li>
<li><img src="img/image04.jpg" alt="ケーキ画像"></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
//bxSlider
$('.slide').bxSlider({
'auto':true, //自動再生
'controls':false, //矢印
'pager':false, //ページ
'speed':500, //停止時間
'mode':'horizontal' //切り替え方
});
});
</script>
</body>
</html>CSS
@charset "utf-8";
html,body,h1,ul,li{
padding: 0;
margin: 0;
line-height: 1;
}
ul{list-style: none;}
img{
vertical-align: bottom;
}
.container{
width: 960px;
margin: 50px auto;
}
.container h1{
margin-bottom: 20px;
text-align: center;
}
.container .bx-wrapper{
margin-bottom: 20px;
box-shadow: none;
border: 0;
}12月22日授業データ「bxSlider-2」
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>bxSlider演習２</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>bxSlider演習２</h1>
<ul class="slide">
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
//bxSlider
//*
$('.slide').bxSlider({
'auto':true, //自動再生
'controls':false, //矢印
'pager':false, //ページ
'speed':500, //停止時間
'mode':'horizontal' //切り替え方
});
//*/
});
</script>
</body>
</html>style.css
@charset "utf-8";
html,body,h1,ul,li{
padding: 0;
margin: 0;
line-height: 1;
}
ul{list-style: none;}
img{
vertical-align: bottom;
}
.container{
width: 960px;
margin: 50px auto;
}
.container h1{
margin-bottom: 20px;
text-align: center;
}
.container .bx-wrapper{
margin-bottom: 20px;
box-shadow: none;
border: 0;
}
.container .slide li{
height: 300px;
}
.container .slide li.one{
background: url(../img/image01.jpg) no-repeat 0 0;
}
.container .slide li.two{
background: url(../img/image02.jpg) no-repeat 0 0;
}
.container .slide li.three{
background: url(../img/image03.jpg) no-repeat 0 0;
}
.container .slide li.four{
background: url(../img/image04.jpg) no-repeat 0 0;
}