いい感じ!SVGを使ったクールなスライダーエフェクトを実装できるjQueryプラグイン『Radial SVG Slider』

SVGを使ったクールなスライダーエフェクトを実装できるjQueryプラグイン、Radial SVG Sliderを紹介します。

SVGを使ったクールでお洒落なスライダーエフェクト『Radial SVG Slider』
Radial SVG Slider

スライダーに、SVGを使ったクールでお洒落なエフェクトを実装できるjQueryプラグインです。

まずは、デモページをご覧ください。

スライダーの矢印ボタンを押すと、矢印を囲む円が広がるようにして、スライドが切り替わります。

デモ

サイトトップページのスライダーや、ギャラリーページでの使用がおすすめです。

実装方法

サンプルページに実装してみました。

ダウンロード

紹介ページの右側にある「Download」ボタンからソースコードをダウンロードできます。

ダウンロードしたZIPファイルを展開したら、「img」、「css」、「js」フォルダを使用します。

Image

ZIPファイルに入っている、imgフォルダをそのままアップします。

CSS

ZIPファイルに入っている、CSSファイル「style.css」を読み込みます。

また、一緒に入っている「reset.css」を読み込んでもいいですが、読み込まない場合は、下記のスタイルを記述します。

JS

jQueryと、ZIPファイルに入っているJSファイル「snap.svg-min.js」、「main.js」を読み込みます。

HTML

スライダーのHTMLは下記のようになります。

以上で、実装は完了です。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 840