Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

bxSlider

おすすめのスライダーを紹介します。

それは、bxSliderです。

とても加工が簡単ですしIEでも表示されるのでとてもおすすめです。

 

①ファイルをダウンロード

f:id:suge1040:20140605004526p:plain

bxSliderの公式サイト(http://bxslider.com/)の右上の「Download」ボタンから必要なファイルをダウンロードします。

ダウンロードすると下記のファイルがダウンロードされます。

f:id:suge1040:20140605005034p:plain

私は、

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 を使用しました。