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. no-image
  2. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  3. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

  4. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  5. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  6. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP