jQuery>記事やコンテンツが流れていくスライダーのアレを作ってみた

記事やコンテンツが流れていくスライダーのアレを作ってみた

2018年7月28日

ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか?とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。

コンテンツスライダーを作る

まずは作ったデモサイトをご覧ください

これです。
横並びで記事が表示されているスライダーです。

必要なもの

bxsslider

必要なものはこれで呼び出せます
もちろんローカルにダウンロードもできますが手軽に試したい人は上記のやり方でも十分です

スライダーにしたい要素を囲う親要素に対してjQueryで操作します。今回の場合は
$(‘#slider’).bxSlider({});このように操作していきます。と言ってもオプションをつけるだけでOK

スライドさせたい要素を囲う#sliderに対して

のようにjQueryを設定します。

いろいろ不要なオプションもついてしまっているかもしれませんが、重要なのはslideWidth: 200,とmoveSlides: 1です。
スライドの幅と、ボタンを押した時に動かす量です。スライド1つ分を動かすようにしています

あと、.bx-wrapperにhoverイベントを付与しました。
スライダーの左右にある、次へボタンと戻るボタンに対して、hover時は表示させてhoverしてない時は非表示にするというようにしています。

あとはcssで調整します

一部省略しています。

普通に作るとスライダーの枠が表示されてしまうので、それらを削除しています。
そして画像の上にカテゴリを重ねるようにpositionを設定しています。

また表示するコンテンツを中央に寄せたようなデザインにしたかったので、スライド幅の半分だけずらしています。

 

プラグインを使うと超簡単にオシャレなサイトが作れるので便利です。