コピペで簡単!bxSlider設定方法

bxSliderの特徴

  1. 初心者でも超簡単に設置

  2. レスポンシブ・カルーセルに対応

bxSliderの設定方法

メニューの右の Githubからダウンロードする

jQuery Slider | Responsive jQuery Slider | bxSlider
Add a respsonsive image slider to any website.

常にエラーチェック等改善されているGithubからダウンロードする

 

緑のボタンをクリック

 

 

「ZIPダウンロード」をクリック

DEMO

デモ

bxSlider設定方法DEMOページの画像

準備

1.

bxslider-4-master > src  > css > jquery.bxslider.css

をコピーして、作成先のcssのフォルダーにペースト

2.

bxslider-4-master > src  > js >jquery.bxslider.js

をコピーして、作成先のjsのフォルダーにペースト

3.

bxslider-4-master > dist > images > bx_loader.gif

bxslider-4-master > dist > images > controls.png

をコピーして、作成先のimgのフォルダーにペースト

 

 

読み込んで利用

スライド画像の設定
  • スライド画像は、リストで追加する

スライドの動作設定
  • 初期設定

 

このとき、「jquery.bxslider.css」の画像のパスを書き換える必要があります。

カスタマイズ

カールーセル

タイトルとURLをコピーしました