いい感じ!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は下記のようになります。

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

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

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.06.06
  • Views 648