bxsliderの使い方

bxsliderを使用して自分のサイトにあったカスタマイズをしましょう！！

bxslider.com

まずは、bxsliderの公式サイトに行き、GitHubのダウンロードからzipファイルをダウンロードしてください。
ダウンロードしたzipファイルには色々入っておりますが、その中で必要なファイルはGitHubに記載されている通り

・jquery.bxslider.min.js
・jquery.bxslider.css
・imagesに入っているpng画像（自分のファイルがimagesという名前ではない場合bxslider.cssのパスの書き換えをしてください）

上記のファイルだけです。

このファイルを自分のファイルに入れ、htmlにリンクして使用します。

htmlの記述

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

ulのクラス名は絶対ですのでこれを変えてしまうと表示されないので注意してください。

jQueryの記述

$(function(){
  $('.bxslider').bxSlider();
});

jQueryの記述もこれが絶対です。

これで表示がされますが、画像のサイズとbxsliderのサイズが合っていなかったりしますよね。

カスタマイズするにはリンクしたbxslider.cssの中を書き換える必要があります。

bxslider.css

/** THEME
===================================*/
.bx-wrapper {
/*  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;*/
  border: 5px solid #fff;
  background: #fff;
  max-width:960px!important;
  margin:0 auto;
}

max-widthを自分の画像サイズにして!importantで最優先にします。
margin:0 auto;で左右真ん中にもってきます。
（※もしかしたらもっとよい方法があるかもしれませんが）

画像が切り替わる下の・・・の色を変えるとき

/*選択されていないとき（薄い色）*/
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #e6bfab;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/*選択されているとき（濃い色）*/
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #bd6856;
}

backgroundを変えればOKです！

自動でスライドしてほしかったり、フェードで出てくるようにするなどは
bxslider.jsを変更します。

bxslider.com
公式サイトのopctionにいろいろ書いてあるので見てみてください。

＜追記（2020.11.29）＞
こちらの記事を読んでくださっている方が一番多く…ありがとうございます。
私自身仕事でhtml,cssだけでサイトを作ることはほぼないので就職してから使ったことはないのです。
仕事では「WordPress」を使用しているので「smart slider3」というプラグインを使用しております！
WordPressに興味がある方は併せてsmart sliderもチェックしてみてくださいね^^