TEORICO

  • Home
  • Blog
  • About
  • Contact
  • ホーム
  • >
  • 【Web】よく使うjQueryプラグインの紹介(スライダー編)

【Web】よく使うjQueryプラグインの紹介(スライダー編)

【Web】よく使うjQueryプラグインの紹介(スライダー編)

2017-10-04
よく使うjQueryプラグインスライダー編 これ使いやすいよ〜

今はもうどのサイトでも定番になっているスライダー

CSSだけでも可能になってきましたが、細かな設定などが難しかったりします。

今回はjQueryのプラグインに絞って、特によく使う、また使用する際もわかりやすく使い勝手の良いスライダーをご紹介します。

 

bxSlider

bxsliderのサイトのスクリーンショット

スライダー系jQueryプラグインで定番中の定番であるbxSlider

ただし、注意が必要なのが画像をクリックした場合やコントロール(矢印や下の●)を触ったら自動でスライドする機能が止まってしまうというバグ?があるので注意が必要です。

*setTimeoutやsetIntervalなどを利用すればバグは解決出来ます。

日本語で詳しく解説されているサイト↓

STUND4U bxSliderの使い方と「オプション」によるカスタマイズ

 

slick

slickのサイトのスクリーンショット

Slick

スライドする画像の大きさが違うなどでも大丈夫なスライダー系プラグインです。

公式サイトに使い方やオプションが記載されているのでわかりやすいです。

オプションが豊富なのも魅力的です。

日本語で詳しく解説されているサイト↓

ITHat どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方

 

Slider Pro

SliderProのサイトのスクリーンショット

サムネイル付きならSlider Proがオススメです。

他のbxSliderやslickでもサムネイルをつけることが可能ですが、SliderProの方が楽に作成できると思います。

他にも動画をスライダーに入れることも対応しており、スライダー内の動画に対するオプションまでも準備されています。

日本語で詳しく解説されているサイト↓

ONZE 【jQuery】今こそマスターしたい高機能スライダー[Slider Pro]の使い方

 

jQuery Responsive FullWide Slider

*名称が付いていなかったので、サンプルについていた名称をつけています。

BlackFlagさんが公開されているスライダーです。

タイトル通り、画面いっぱいに並べることが出来るスライダーになります。

有りそうで無かったのでものすごく助かります。

jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験

 

まとめ

これらのプラグインはスライドさせるのは画像だけではなく、要素をそのままスライドさせたりすることも可能です。

主にスライダー系はこの辺りを抑えておけば間違いないと思います。

それぞれCSSが違ったりするので、使い分けてみても良いかと。

今回はスライダー編だったのですが、またの機会に別のプラグインを紹介したいと思います。

  • 前の記事:
    【Web&プログラム】命名規則のNGと考え方について
  • 次の記事:
    【jQuery】スクロールしたらついてくるナビゲーション

新着記事

  • 初回アクセス時など初回限定の何かを制御したいとき
  • チャットツールですぐにスクリーンショットを貼る
  • 【JavaScript】Swiper ページネーション2種類使いたいけど…
  • サイトの不具合のお知らせ
  • 【JavaScript】スクロールしたらついてくるナビの作り方

カテゴリー

  • Web (30)
  • JavaScript (12)
  • jQuery (11)
  • プログラム (7)
  • 雑記 (6)
  • CMS (3)
  • PHP (3)
  • Kaizen Platform (2)
  • デザイン (1)

過去の記事

  • 2022年9月(1)
  • 2021年3月(1)
  • 2020年10月(1)
  • 2019年8月(1)
  • 2019年5月(1)
  • 2018年11月(1)
  • 2018年6月(1)
  • 2018年5月(2)
  • 2018年4月(4)
  • 2018年1月(1)
  • 2017年12月(1)
  • 2017年11月(1)
  • 2017年10月(3)
  • 2017年9月(3)
  • 2017年8月(7)
  • 2017年7月(7)
  • 2017年6月(3)

プライバシーポリシー

Copyright© 2016-2022 ておりこ All Rights Reserved.