Impulse Slider

JavaScript

3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

Impulse SliderというjQueryプラグインを使えば3Dスライダーを簡単に実装することができます。立体的にスライドしていく動きが、見ていてとても面白いですね。デモではスライダー下部に矢印ナビや自動スライド停止ボタンもついています。サイトに立体感を取り入れたい場合に活用してみたいですね。

[ads_center]

Impulse Sliderの使い方

Impulse Slider

Impulse Slider

このように立体的にコンテンツをスライドさせることができます。色々なプリズム形状がサポートされているとのこと。画像やコンテンツの量に応じてどういったプリズム形状になるかが決定されます。

$(window).load(function() {
    $('#slider').impulseslider({
        height: 400,
        width: 300,
        depth: 300/1.09,
        perspective: 2800,
        pauseTime: 1500,
        transitionDuration: 1000,
        transitionEffect: "ease-in-out",
        autostart: true,
        rightSelector: ".right",
        leftSelector: ".left",
        pauseSelector: ".pause",
        directionRight: true,
        containerSelector: "#slider-container",
        spinnerSelector: "#slider",
        images: ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg","img/img5.jpg"],
        imageDivClasses: ["face"]
    });
});

オプションもたくさん用意されています。画像の場合は、上記のようにimagesというパラメーターに画像パスを入れていきます。

関連記事

  1. JQuery Portfolio
  2. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  3. LoadGo

    JavaScript

    画像をプログレスバー(ローディング)にできるjQueryプラグイン「LoadGo」

    LoadGoはサイト内にあるロゴなどといった画像をプログレスバー(ロー…

  4. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  5. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  6. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP