WEBデザイナーAkiの備忘録

bxsliderを使ったtickerスライダー(デモあり)

2017.6.1 ,

bxsliderは仕事でよく使用しているのですが、今回初めてtickerスライダーとして使用したので、おさらいしてみました。

デモ

≫デモのスライダーはこちら

デモのスライダーを作ってみました。
写真5枚がえんえんとループしています。

インストール

ひとまずbxslider公式からbxslider一式をダウンロードします。

js設定

必要なjsやcssを適当なディレクトリに格納し、リンクをhead内に入れていきます。

tickerスライダーとしての設定は下記の通り。

useCSSをfaleseにし、CSSアニメーションの利用をやめます。
これがtrueのままだと、写真が一周したときに一瞬ちらつきができてしまいます。

htmlの記述

「Nukoslide」にはお好きなIDを入れて作成してください。(その場合はスライダーの設定にある#Nukoslideもそれと同じものに)
中の写真はdivで囲ってますが、ulとliなどでもいいですね。

今回は本当に最低限の設定で作成していますが、レスポンシブにしたり、オプションがたくさんあるので色々使ってみるといいんじゃないかなと思います。

コメント