KYO

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

2018年7月28日 jQuery , , , , ,

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

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

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

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

必要なもの

bxsslider

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

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

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

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

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

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

あとはcssで調整します

一部省略しています。

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

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

 

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


関連記事

レスポンシブなスティッキーヘッダーを作るチュートリアル

2018年6月18日

スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。 ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。 しかし、今回は0から作っていきます。   なぜ0から作るかというと、オシャレなステ...

jQueryでフォームのバリデーション機能を実装する

2018年6月10日

最近は、phpとjQueryをメインに勉強しています。 今回はjQueryを使って簡単なバリデーション機能を持った、フォームを作成します。   ソースコードはgithub   完成するとこんな感じです       バリデーションフォームの概要 phpでバリデーション処理を書くと送信ボタンを...

jQueryで超クールなタスク管理アプリを作る

2018年6月16日

このチュートリアルのクオリティが高いので共有します! 微妙にカスタマイズしつつ作りました デモ     これくらいのアプリがサクサクと作れたら気持ちいいですね。     機能としては 新規タスクの追加 タスクの編集 タスクの削除 タスクの完了 これら全てjQueryで行なっていきます。  ...

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日

追記:現在のテーマでは使用していません。 現在はKYOというテーマを使っています   たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。 そういうサイトを見ると、真似したくなりますよね? でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です!       jquery...

オーバーレイをかけたスライドメニューを作った[簡単]

2018年7月28日

レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。 メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。 スライドメニューを作る 前回記事やコンテンツが流れていくスライダーのアレを作っ...

JQuery Ajaxを使うときにハマったこと

2018年6月15日

JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。   YouTubeの動画を参考にしました     いざこれを実際に作ると環境によっては動作しません。     ローカル環境からはAjaxは使えないようです。   な...