bxsliderは簡単にスライドショーを作成できるJQueryプラグインです。
ここでは使い方を簡単に説明していきます。
bxsliderのサイトからダウンロードする
手順
- jQuery本体をリンクする
- bxsliderのCSSとjsファイルをリンクする
- bxsliderの呼び出し関数を使い呼び出す
「dist」フォルダから必要な書類を自分の管理フォルダに移動する
ダウンロードしたデータから必要な書類を自分の管理フォルダ内の所定のフォルダの中に移動します。
まずは<head>の中に<link>タグを使いCSSをリンクし、<body>の終了タグの上には<script>タグを使ってJSファイルをリンクする。
JSファイルのリンクは、必ずJQuery本体の下にリンクする。
<!-- bxsliderのCSSを head 内にリンクする -->
<link rel="stylesheet" href="css/jquery.bxslider.css"><!-- bxsliderのJSを bodyの 終了タグの前にリンクする -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>bxsliderの呼び出し関数を設定する
bxSliderを呼び出すための最低限の記述になります。
「.bxslider」のところには任意のクラス名やID名を入れることができます。
$(function(){
$('.bxslider').bxSlider({
// ここにオプションの設定を追記する
});
});