初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

【jQuery】手軽に使えるスライダープラグイン3選

投稿日:2020年2月4日 更新日:

【jQuery】手軽に使えるスライダープラグイン3選
スクリプトがわかるようになれば、一から作ることはできる「スライダー」。
でも、ラクしたいですよね?私もできることならラクして作業を進めたいです。
今回は、よく使われているスライダープラグインのご紹介です。

この記事は以下のような人の役に立つように書いています。

  • ラクしたい
  • スクラッチで書けないからプラグインを使いたい
  • どのプラグインを使えばいいかわからない

プラグインの選び方

正直どのプラグインも大差はないと私は思っています。
好みの動きやカスタマイズのし易さ等を、デモを見て自分が気に入ったプラグインを使いましょう。

私的には、下記の用途で使い分けしています。

・難しい動きを考えないのであれば「bxslider」。
・アニメーションにこだわるのであれば「swiper」。
・動作の安定性をとるのであれば「slick」。

bxslider

公式サイト https://bxslider.com/
GitHub https://github.com/stevenwanderski/bxslider-4
デモ https://bxslider.com/examples/
オススメ ★★★☆☆

初心者にも簡単に扱えるスライダーです。
初めてjQueryで実装するならこのスライダーがおすすめです。
オプションも豊富でカスタマイズ可能です。
若干、不具合があるのが残念なところ。

詳しい設置方法はこちらから

誰でも簡単スライドショー!「bxslider」の設置方法【jQuery】

swiper

公式サイト https://swiperjs.com/
GitHub https://github.com/nolimits4web/swiper/releases
デモ https://swiperjs.com/demos/
オススメ ★★★★☆

jQuery無しでも動く優秀なスライダーです。
オプションも豊富でカスタマイズ可能です。
動きも滑らかで、東京で有名なweb制作会社のスライダーも「swiper」で作られています。

有名どころの企業「Adobe」「CISCO」「BMW」「Disney」・・・でも採用された実績があるようです。(swiper公式サイトより)

slick

公式サイト http://kenwheeler.github.io/slick/
GitHub https://github.com/kenwheeler/slick/
デモ http://kenwheeler.github.io/slick/#demos
オススメ ★★★★☆

サブタイトルに「the last carousel you'll ever need」と書かれており、
動作も安定、オプションも豊富、設置も簡単と三拍子そろっているスライダープラグインです。
現状、不具合等も見当たらないので最もお勧めできるプラグインです。

まとめ

すこしでもラクしてコーディングしていきましょう!

ではまた。

この記事を書いた人

moga

moga

歴14年のフロントエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.