jQuery画像スライダー[Skitter]実装も簡単でアニメーションが38種類

公開日:  最終更新日:2015/12/16

アニメーションが豊富! 38種類!?jQueryスライダー[Skitter]実装も簡単で良い感じ
このブログでも人気のあるjQueryのスライダーに関する記事をいくつか書きましたが、やはりショップのメイン看板的に利用されているショップが多いのではないでしょうか。ショップを構成するコンテンツの1つとして非常によく見かけますよね。

以前の記事


でも紹介したように画像を動かすスライダーにもいくつもjQueryプラグインがあり、どれを使ったら良いのかわかりませんよね。それぞれのプラグインに応じて、カスタマイズ性、指定できる動き、オプションなど違うためどんなことができるという特徴を抑えておけば利用したい場面には役立つのではないでしょうか。

さて本日は、アニメーション豊富な以前紹介したのとは別のスライダーの仕組みを紹介したいと思います。

スポンサードリンク

アニメーション豊富なスライダーjQuery [Skitter]

103-1.png
[skitter]公式サイト
Downloadページから真ん中「Stable Version」をクリックしてファイル一式をダウンロードしてください。
103-12.png

必要なファイルについて

103-13.png

■作成するhtmlファイル

■「jsフォルダ」
jquery.min.js
jquery.easing.1.3.js
jquery.skitter.min.js

■「cssフォルダ」
skitter.styles.css

■「imagesフォルダ」
※使う画像サイズに合わせて「skitter.styles.css」内を修正しておく必要があります。
386行目から389行目付近で 幅と高さの指定があります。
.box_skitter_large {
width: 800px;
height: 300px;
}
初期値は幅800 高さ300になっているので調整してください。

サンプルソース

サンプルソース sample1.html

<link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".box_skitter_large").skitter({
theme: 'default',
animation: 'random'
});
});
</script>
<div class="box_skitter box_skitter_large">
<ul>
<li>
<a href="リンク先URL"><img src="画像URL"></a>
<div class="label_text"><p>イメージ1説明</p></div>
</li>
<li>
<a href="リンク先URL"><img src="画像URL"></a>
<div class="label_text"><p>イメージ2説明</p></div>
</li>
<li>
<a href="リンク先URL"><img src="画像URL"></a>
<div class="label_text"><p>イメージ3説明</p></div>
</li>
<li>
<a href="リンク先URL"><img src="画像URL"></a>
<div class="label_text"><p>イメージ4説明</p></div>
</li>
<li>
<a href="リンク先URL"><img src="画像URL"></a>
<div class="label_text"><p>イメージ5説明</p></div>
</li>    
</ul>
</div>

1行目から4行目がダウンロードしたファイルを読み込んでいる部分
5行目から13行目がスライダーの実行、オプションを記述している部分
14行目から37行目が表示内容を記述している部分
表示したい数だけ<li></li>を記述してください。
<div class=”label_text”>・・・・</div>がラベルを設定している部分になります。

豊富なアニメーション38種類

103-2.png
公式トップの画面左にあるボタンをクリック
するとアニメーションのリストが表示され
選択した内容の動作を確認することが出来ます。
 >>   103-3.png

あらかじめ用意されたテーマ

103-4.png
あらかじめ5種類[default][minimalist][round][clean][square]のテーマが用意されています。
公式サイト上でもテーマを切り替えてイメージを確認することが出来ます。


テーマ default、アニメーション random

テーマ minimalist、アニメーション random

テーマ round、アニメーション random

テーマ clean、アニメーション random

テーマ square、アニメーション random

オプション指定も簡単

103-5.png
さきほどのテーマごとの動作デモ5つについては、テーマとアニメーションの2つしかオプションを指定していません。ただ、実際に使う場面では細かくオプション指定が必要になってくるかと思います。

どんなオプションがあるのか調べるのは面倒という方は安心してください。
公式サイトでソースを生成してくれる機能が用意されています。
(多少は自分で調べる必要はありますが・・・)

公式トップの中央下に青いボタンがあります。

クリックすると↓↓のような画面が表示されます。
アニメーションを選択する画面ですね。
103-6.png
ナビゲーションの設定
103-8.png
その他オプション設定
103-9.png
といった感じで順番に必要な情報を選択していきます。
最後に「Your Code」 をクリックすると 選択した内容に応じた実行ソースが生成されます。
103-10.png
あとは、自分のソースの実行処理部分にコピペしてやれば完成です。


ソースを生成する機能はすべてのオプションが指定できるわけではないので、また後日紹介したいと思います。ぜひ、試してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Comment

  1. baian より:

    はじめまして。
    Skitterを設置したくて試行錯誤している初心者です。
    教えていただきたい事があり、コメントさせていただきます。

    サムネイルを表示させているのですが、サムネイルはメイン画像の左端から表示され、枚数が少ないと右側が空白になってしまいます。
    デザイン的に、サムネイル表示部分をセンターにしたいと思っているのですが、どこをどうすれば良いのかわかりません。
    dotsやnumbersはソースで ***_align:’center’ を加えれば良いようなのですが、サムネイルは違うようです。

    教えていただければ幸いです。

    • peacepopo より:

      baian様

      コメントありがとうございます。

      設置されているメイン画像の幅、サムネイル画像の幅、画像の数、空白のバランスが把握出来ていないのでうまく助言出来るかわかりませんが、例えばサムネイルの1つ1つの画像の幅を調整してみるのはいかがでしょうか?

      cssの150行付近(skitter.styles.css)
      .box_skitter .info_slide_thumb .image_number {
      overflow: hidden;
      width: 100px; →サムネイル画像1つ1つの幅

       ・
      上記のwidthを調整して、右側の空白を埋めてみるという方法はいかがでしょうか?

      こちらで画像を少なくして確認したところ、サムネイル部分にマウスオーバーした際にサムネイル画像が右寄せになる(スクリプト側でleftの値を変更している)仕組みになっているようなのでcssの調整だけでは中央寄せは難しいと判断しました。

      また、画像数が多い場合、サムネイルがすべて表示出来ない際も、サムネイルエリアにマウスオーバーして左右にマウスを動かすことで表示しきれていないサムネイルを表示する仕組みになっている関係もあると思われます。(一度、サムネイル部分にすべて表示出来ないほど画像数を多めに設定してみるとわかりやすいかもしれません)

      • baian より:

        ご回答いただき、ありがとうございます。

        最初にコメントすれば良かったのですが、メイン画像の横幅は850pxで、サムネイル画像の横幅は90px(たぶん)で設定しています。
        同じレイアウトのページを数ページ作りたいので、それぞれを同じバランスにしたいと思いました。
        画像の枚数はページにより違い、6~9程度です。

        背景が白いページに、Skitterのバックも白にして、サムネイル画像も全画像がある程度見えるよう非透明度を上げてしまったので、センターに並んでた方が見た目が良いのかな?と思った次第です。

        ご回答を見る限り、一筋縄ではいかないようなので、再検討したいと思います。
        色々と、ご丁寧にありがとうございました。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑