bxSlider
おすすめのスライダーを紹介します。
それは、bxSliderです。
とても加工が簡単ですしIEでも表示されるのでとてもおすすめです。
①ファイルをダウンロード
bxSliderの公式サイト(http://bxslider.com/)の右上の「Download」ボタンから必要なファイルをダウンロードします。
ダウンロードすると下記のファイルがダウンロードされます。
私は、
1) imagesフォルダ名をimgに変更。
2) 拡張子がcssのファイルをcssフォルダを作成し移動。
3) 拡張子がjsのファイルをjsフォルダを作成し移動。
しファイルの整理をしました。
※「jquery.bxslider.css」、「jquery.bxslider.min.js」、「imagesフォルダ」の3つがあれば基本的に大丈夫です。
②ソースは下記のように記述しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="css/style.css">
<!-- jQuery library (served from Google) -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script>
jQuery(document).ready(function($){
$('.slider').bxSlider({
auto:true,
speed:1000,
mode: 'fade',
captions: false
});
});
</script>
</head>
<body>
<div class="slider">
<div><img src="img/01.jpg" alt=""></div>
<div><img src="img/02.jpg" alt=""></div>
<div><img src="img/03.jpg" alt=""></div>
</div>
</body>
</html>
スライドさせたい写真は、
<div class="slider">
<div><img src="img/01.jpg" alt=""></div>
<div><img src="img/02.jpg" alt=""></div>
<div><img src="img/03.jpg" alt=""></div>
</div>
もも色の記述の様に中に入れるだけです。
とっても簡単です。
③stylesheetで形を整えます。
いろいろアレンジができるのでこちらのサイトを参考にして下さいね。
http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html
ちなみに私は、example3 を使用しました。