jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ(Tickerモード編)
jQueryプラグイン「bxSlider」シリーズの6作目となります。
前回の記事ではbxSliderを利用してカルーセルスライダーを実装する方法をご紹介しました。
カルーセルスライダーはバナーのような小さい画像を複数並べて順番に表示させたい場合に利用することが多い実装ですが、
『最新のニュース記事のタイトルを順番に表示したい!』
といったように、順番に表示させたいコンテンツが画像ではなくテキストが主体となるケースも考えられます。
今回は同じスライダーでも「Ticker Mode」というオプションを利用した実装をご紹介いたします。 使いどころがなかなか難しい(当社比)実装ではありますが、来たる日に備えて覚えておいて損はないかと思います。
Tickerとは
ティッカー – Wikipedia「Ticker」という言葉はあまり耳慣れないかもしれませんが、普段テレビでニュースをご覧になる方や、金融商品(株式取引や為替取引)等の売買をされる方なら一度は目にしたことがあると思います。
緊急速報時にテレビ画面の上下に速報記事が流れたり、証券取引所に設置されている電光掲示板に現在の市場取引価格が流れるアレのことです。駅のホームの時刻表や、町中のデジタルサイネージなんかでもよく見かけますね。
↑こーゆーやつです。
テレビ画面や電光掲示板といった限られた表示エリアのなかで、多くのコンテンツを効率よくユーザーに提供するために考えられた手法の一つで、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>
通常のスライダー設定のままでもコンテンツを順番に表示することは可能ですが、常に文字が横に動いている(流れている)ことで、閲覧ユーザーに対してコンテンツが後続している(複数コンテンツがある)ことをアピールできる点がメリットだと思います。
その反面、表示したいコンテンツが増えると、Tickerの順番を待たせる必要がでてきてしまいますので、重要な情報をユーザーに提供できなくなる可能性が高まります。これはスライダー実装全般に言えることですが、ページコントロールを利用して順番をスキップできない分だけ、Tickerの方が分が悪いと言えるでしょう。
実装者としてはメリット、デメリットを考えたうえで、より良い実装を提供できるようにしたいところです。
その昔、marqueeタグというものがありまして…
<marquee>: マーキー要素 – HTML: ハイパーテキストマークアップ言語 | MDNweb制作に長く従事している人なら覚えているかもしれません。
昔はティッカーと同じような動作を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制作に従事するものとして、より良いコンテンツを提供できるよう、日々精進していきたいと思う今日この頃です。
上記サンプルがスライダーカスタマイズのお役に立てば幸いです。
この記事を書いた人
- 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。
この執筆者の最新記事
関連記事
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー