Webコーディング

jQueryスライダーbxSliderで画像がちらつく場合の修正方法

  • このエントリーをはてなブックマークに追加

スマホ(レスポンシブ)対応でスワイプできるスライダーの定番

スムーズに導入できて、設定項目も豊富なjQueryスライダー「bxSlider」

実装例はこちら(ダウンロードは記事の一番下に記載)

http://www.click.jp/example01/slideshow/bxslider.php

導入にあたり、ループ時に、1枚目の画像がちらつく(一瞬、画像の半分が白くなる)現象が発生しました。

このような構成で設置しています

www
─ index.html
─ common/js/bxslider/images/
─ common/js/bxslider/jquery.bxslider.css
─ common/js/bxslider/jquery.bxslider.js

対処方法

今回はjquery.bxslider.jsのデフォルト設定値を書き換えて変更しました。

// GENERAL
useCSS: ture,

// GENERAL
useCSS: false,

に。

おまけ

jquery.bxslider.jsには、他にも、スライド間隔(pause)やスピード調節(speed)、スライドインの方向(mode)など、たくさんの設定項目がありますので、

jsで以下のように設定することで

$(function(){
$(‘.bxslider’).bxSlider({
mode: ‘vertical’
});
});

で縦方向のスライドインにできます。フェードする場合は’fade’です。

bxSliderの入手先

ダウンロード:https://bxslider.com/

  • このエントリーをはてなブックマークに追加

Webサイト制作、ご相談ください。

お客様のご要望をおききして、しっかりとご提案いたします。

  • 18万円から利用できるWebサイト制作サービス「サワーリ」【IT補助金対応】

  • オーダーメイドのWebサイトリニューアル【IT補助金対応】

  • WordPressなどのCMS導入やWebアプリケーション開発の実績豊富です!


是非、当社スタッフまで、お気軽にご相談ください。

 

今すぐお問い合わせ

コメントを残す