JavaScript

スライド機能がついたプロダクトギャラリーを実装できる「Product Preview Slider」

Product Preview Sliderはスライド機能がついた便利なプロダクトギャラリーを実装することができます。個別の製品ごとにスライダーがついているので、ユーザーにとっても色んなパターンの商品画像が見れて安心できそうですね。

Product Preview Slider

以下はProduct Preview Sliderのデモになります。

Product Preview Slider

デモ

商品にマウスオーバーすると前後にある画像が端の方に表示されるので、それをクリックする(もしくは画像下にあるナビゲーションをクリック)とスライドします。

色違いの商品、各部分のパーツ、様々な角度からの画像などなど工夫次第でとても便利なプロダクトギャラリーを実装できそうですね。

ユーザーにとって「知りたい情報」がしっかりと載っていると購入時にとても安心しますからね。

各商品ごとにスライダーを搭載できるので、「商品一覧を見ながら気になったものをその都度スライダーでチェックする」ということを1つのページ内でできるのがとても便利です。

そんなわけで、スライダーを活用したプロダクトギャラリーを実装したい方は是非チェックしてみてください。

Product Preview Slider

Slideout.js軽量でタッチスライド対応のサイドメニュー・Slideout.js前のページ

アニメーション付きでスタッキングしていくメッセージ通知「Toast」次のページToast

関連記事

  1. TabTab.js

    JavaScript

    アニメーション付きで切り替わるjQueryのタブプラグイン「TabTab.js」

    TabTab.jsは素敵なアニメーション付きのタブコンテンツを実装する…

  2. Navi.js

    JavaScript

    ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

    ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグ…

  3. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  4. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  5. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  6. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP