初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

【bxslider】オプションを複数設定する方法

投稿日:2020年1月9日 更新日:

オプションを複数設定する方法
今回はbxsliderのオプション機能を複数実装したい場合のやり方について解説してきます。

方法

まず通常のスクリプトは下記になります。

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

複数のオプションを実装した記述は下記になります。

$(function() {
  $('.slider').bxSlider({
    auto: true, /* 追加部分 */
    controls: false, /* 追加部分 */
    pager: false /* 追加部分 */
  });
});



デモ

実際に設置したものはコチラになります。
demo

複数オプションを実装する場合は、各オプションの最後に「,(カンマ)」でつなげて書く必要があります。
オプションの設定の記述はやりたい項目によって違いますので、
細かい設定については下記記事をご参考ください。
※「auto」の場合は「trueかfalse」、「speed」の場合は「500(数値)」になります。

誰でも簡単スライドショー!「bxslider」の設置方法【jQuery】

また、いろいろなカスタマイズのやり方がありますので随時記事を書いていきますね。
ではまた。

この記事を書いた人

moga

moga

歴14年のフロントエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.