Blog

レスポンシブ&タッチ対応!スライダーjQueryプラグイン「SlidesJS」

レスポンシブサイトが増えてきて、レスポンシブとタッチの両方に対応していて、安定して動作するようなスライダーの必要性も高くなっています。

またそれに加えて、お客様からの難題に答えられるような柔軟性のあるスライダーとなると、なかなかjQueryプラグインで見つけるのは大変です。

今回そんな中探していて、シンプルですがとても使いやすいスライダーの、「SlidesJS」というjQueryプラグインを見つけましたので、ご紹介いたします。

↓「SlidesJS」のサイト

SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3

 

コチラの特長としては、

エフェクトは普通のスライドとフェイドのみと少ないものの、

レスポンシブに強いということが挙げられると思います。

 

画面の幅に応じてスライダーの大きさを自動調整してくれるスライダーは他にもいくつかありますが、

このSlidesJSでは、基準となるスライダーの縦横の大きさをピクセルで指定し、

その基準に従って縦横の大きさを画面の幅に応じて調整することができます。

 

スマホなどで、スライダーの画像を、PC向けとは異なる縦横比の画像に切り替える処理をしている場合、通常の自動調整ではこの切り替えを認識できずに表示がおかしくなってしまいます。

しかし、このSlidesJSの画像サイズの指定オプションを使うと、

ある幅以上では幅960px×高さ350pxを基準に、

ある幅未満では幅640px×高さ533pxを基準にするといった場合わけを行うことができるので、

よりレスポンシブサイトに柔軟に対応することができます。

 

↓DEMO

DEMO

 

 使い方

使い方もシンプルです。

まずサイトからjquery.slides.min.jsをダウンロードして、HTMLで読み込みます。

HTML

<head>内

<body>内

 

JavaScript

何も設定しない場合は、コチラのコードで実装完了です。

 

オプションも充実しています

ナビゲーション、ページネーション、自動再生それぞれでエフェクトを指定できるのも魅力だと感じました。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ