bxslider

f:id:hourin-g0913:20160325130638p:plain

プラグインを利用して、スライド（ボタンをクリックすると画像が滑りながら別の画像に切り替わる）をつくる。

①下記のサイトへ飛んで、ダウンロードボタンをクリック。
bxslider.com

②zipデータを解凍する。使用するデータのみ抜き取る。使用するものは下記の通り。
CSSフォルダ

jquery.bxslider.css

imagesフォルダ

controls.png
bx_loader.gif

jsフォルダ

jquery.bxslider.js

③HTMLとCSSの記述ースライドにしたい画像はulの中のliに画像を入れる。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>bxslider</title>
</head>

<body>
<div id="container">
<ul class="bxslider">
<li><img src="img/header_01.png" alt="#"></li>
<li><img src="img/header_02.png" alt="#"></li>
<li><img src="img/header_03.png" alt="#"></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*reset*/
html,body,ul,li{
 margin: 0;
 padding: 0;
 line-height: 1.5;
}

/*style*/
li{
 list-style: none;
}

④HTMLにレイアウトとスライダーのCSSをリンクする。

<head>
<meta charset="utf-8">
<title>bxslider</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>

⑤さらにその下にjQueryとスライダーのJavaScriptファイルをリンクする。

<head>
<meta charset="utf-8">
<title>bxslider</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</head>

⑥bxsliderトップサイトの「Step 3: Call the bxSlider」というタイトルにコードが書いてあるので同じように書く。

<head>
:
省略
:
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</head>

これでスライダーが完成。