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

mogaBlog

Web コーディング

【bxslider】スライダーを縦の移動に変更する方法

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

スライダーを縦の移動に変更するやり方
今回はbxsliderの機能の一つで設置したスライダーを
左右の移動ではなく縦の移動に変更するやり方について解説してきます。

方法

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

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

縦の移動に変更した記述は下記になります。

$(function() {
  $('.slider').bxSlider({
    mode:  'vertical' /* 追加部分 */
  });
});



デモ

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

デフォルトの設定だとmodeのところが「horizontal」で設定されています。
※記述がされていなくてもプラグインの初期設定が「horizontal」になっています。
縦移動に変更したい場合はmodeのところを「vertical」にすることで変更することができます。

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

この記事を書いた人

moga

moga

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

Ads



-Web, コーディング

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