jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（Tickerモード編）

2024.01.26

WEB

Webデザイン

jQueryプラグイン「bxSlider」シリーズの6作目となります。

jQueryプラグイン「bxSlider」シリーズ

前回の記事ではbxSliderを利用してカルーセルスライダーを実装する方法をご紹介しました。

カルーセルスライダーの例

カルーセルスライダーはバナーのような小さい画像を複数並べて順番に表示させたい場合に利用することが多い実装ですが、

『最新のニュース記事のタイトルを順番に表示したい！』

といったように、順番に表示させたいコンテンツが画像ではなくテキストが主体となるケースも考えられます。

今回は同じスライダーでも「Ticker Mode」というオプションを利用した実装をご紹介いたします。使いどころがなかなか難しい（当社比）実装ではありますが、来たる日に備えて覚えておいて損はないかと思います。

INDEX

Tickerとは
Ticker Modeの指定方法
Ticker Modeで実装してみる
さいごに

Tickerとは

ティッカー – Wikipedia

「Ticker」という言葉はあまり耳慣れないかもしれませんが、普段テレビでニュースをご覧になる方や、金融商品（株式取引や為替取引）等の売買をされる方なら一度は目にしたことがあると思います。

緊急速報時にテレビ画面の上下に速報記事が流れたり、証券取引所に設置されている電光掲示板に現在の市場取引価格が流れるアレのことです。駅のホームの時刻表や、町中のデジタルサイネージなんかでもよく見かけますね。

のぞみ（新幹線）におくれが出てますの無料写真素材 – ID.25029｜ぱくたそ

↑こーゆーやつです。

テレビ画面や電光掲示板といった限られた表示エリアのなかで、多くのコンテンツを効率よくユーザーに提供するために考えられた手法の一つで、webサイトでも同様に利用することができます。

昨今はスマートフォンなどのモバイル端末でwebサイトを閲覧するユーザーが増えたことから、今後は活躍の機会が増えるのではないかと著者は密かに思っています。

Ticker Modeの指定方法

それではbxSliderで実装できるTicker Modeの設定について、公式サイトの一覧を見ていきましょう。

Options

カルーセルスライダーのように独立したメニューとして用意されていないのでちょっとわかりにくいのですが、『+Generoul』のメニューから各オプションを確認できます。

オプション名	デフォルト値	説明
ticker	false	tickerモードの利用
tickerHover	false	マウスホバー時にtickerを止める

Ticker Modeを設定するオプションは上記の2つだけです。
tickerHoverオプションはマウスホバーに関するものなので指定を省略しても動作します。スマホサイトを前提に考える場合は特に意識しなくても困ることはないと思います。

オプション名	デフォルト値	説明
speed	500	スライドの所要時間

デフォルト値だとかなり早いスピードでコンテンツがスライドしてしまいますので、speedオプションも合わせて利用することが多くなります。また、細かい指定は割愛しますが、カルーセルスライダーのオプションと併用することで表示するコンテンツの数等を制御することも可能です。

カルーセルスライダーの時と同様、最小限の学習コストで実装を提供できるところが開発者にとって嬉しいポイントですね。

Ticker Modeで実装してみる

それでは先ほど紹介したオプションを実際に指定してTickerスライダーを実装してみます。
紙面の都合上、詳細なリセットCSSは省略しますが、下記のコードで概ね崩れることなく動作は確認できると思います。

<html>
<head>

<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.wrap {
    width: 600px;
    margin: 100px auto 0 auto;
    padding: 30px;
    border: 1px solid #dfdfdf;
}
</style>
 
<!-- JavaScriptファイルの読み込み開始 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<!-- // JavaScriptファイルの読み込み終了 -->
 
<!-- JavaScriptの記述開始 -->
<script>
$(document).ready(function() {
  const $slider = $('#slider').bxSlider({
    pager: false,
    controls: false,
    ticker: true,
    tickerHover: true,
    speed: 10000,
  });
});
</script>
<!-- // JavaScriptの記述終了 -->

</head>
<body>
 
<!-- HTMLの記述開始 -->
<div class="wrap">
  <div id="slider">
    <div><div class="box">slide1つ目のコンテンツです</div></div>
    <div><div class="box">slide2つ目のコンテンツです</div></div>
    <div><div class="box">slide3つ目のコンテンツです</div></div>
  </div>
</div>
<!-- HTMLの記述終了 -->
 
</body>
</html>

※gif画像だと若干カタカタしたような見た目になってしまいましたが、実際にHTMLで確認するともう少し滑らかに動作します。

通常のスライダー設定のままでもコンテンツを順番に表示することは可能ですが、常に文字が横に動いている（流れている）ことで、閲覧ユーザーに対してコンテンツが後続している（複数コンテンツがある）ことをアピールできる点がメリットだと思います。

その反面、表示したいコンテンツが増えると、Tickerの順番を待たせる必要がでてきてしまいますので、重要な情報をユーザーに提供できなくなる可能性が高まります。これはスライダー実装全般に言えることですが、ページコントロールを利用して順番をスキップできない分だけ、Tickerの方が分が悪いと言えるでしょう。

実装者としてはメリット、デメリットを考えたうえで、より良い実装を提供できるようにしたいところです。

その昔、marqueeタグというものがありまして…

<marquee>: マーキー要素 – HTML: ハイパーテキストマークアップ言語 | MDN

web制作に長く従事している人なら覚えているかもしれません。
昔はティッカーと同じような動作をHTMLのタグを記述するだけで提供することができました。

<html>
<head>

<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.wrap {
    width: 600px;
    margin: 100px auto 0 auto;
    padding: 30px;
    border: 1px solid #dfdfdf;
}
</style>
 
</head>
<body>
 
<!-- HTMLの記述開始 -->
<div class="wrap">
  <marquee>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</marquee>
</div>
<!-- HTMLの記述終了 -->
 
</body>
</html>

懐かしいですね。

最新のブラウザでも動作はするようですが、MDNのドキュメントを見る限りでは非推奨となっていますので、ご利用の際は自己責任でお願いします。

さいごに

いかがでしたでしょうか。bxSliderを使ったTickerスライダーの実装をご紹介しました。

前述しましたが、Tickerに限らず、webサイト制作においてスライダーの実装はメリット・デメリットを考えて導入する必要があると著者は考えています。 web制作に従事するものとして、より良いコンテンツを提供できるよう、日々精進していきたいと思う今日この頃です。

上記サンプルがスライダーカスタマイズのお役に立てば幸いです。

jQueryプラグイン「bxSlider」シリーズ

この記事を書いた人

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。