jQuery

横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!


みなさんこんにちは。11月に入り寒くなりましたね。
今年もあと2ヶ月となりました。
さて、今回は、ワンページ(シングルページ)デザインなどのヘッダーに使われる
横幅いっぱいに表示できるスライダーのプラグインの使い方をご紹介します。
Bootstrapのような表現ができあがりますよ。

スポンサードリンク

デモ&プラグインダウンロード

http://iamapioneer.com/plugins/skippr/にアクセスしましょう。
トップのスライドがデモとなっています。
また、スライド内のダウンロードボタンをクリックしてダウンロードしましょう。

デモ&ダウンロード

使い方

<head>内要素に

ダウンロードしたjsファイルとjQuery本体、CSSを以下のように読み込みます

HTML&CSSに

次にスライド表示のHTMLを入れます

この時、親要素である#containerに任意の高さの設定と横幅を100%に設定しましょう

 

<script>設定

次にスクリプトの設定です

以上となります。

ちなみに私のポートフォリオにも実装してみました。

ポートフォリオ

サンプルページも追加しました。

サンプル

 

最後に

いかがでしたか?
シングルページのトップに最適なスライダーのご紹介をしました。
ぜひご活用ください。

横幅いっぱいに表示するスライダーをBootstrapで作る方法。こちらの記事もご参考にされてください。

追記いたしました

2015.2.14 jsのほかに、CSSを読み込む設定を追加。
さらに、Skipprの綴りを訂正。SkipperではなくSkipprでした。すいません。。。

2015.3.03 jQuery本体のスクリプトファイルをjquery-1.10.2.min.jsに変更しました。紛らわしくてすいません。
2015.8.22 Bootstrapで簡単に作られる方法を公開しました。>>http://web-design-cafe.com/archives/1124

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めて約4年が経ちました。ここでは、仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

関連記事

  1. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  2. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  3. Web Design

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書

    みなさんこんにちは、mayukouです。さて、今回はwordpres…

  4. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  5. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  6. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

コメント

  • コメント (12)

  • トラックバックは利用できません。

    • トム
    • 2014年 12月 25日

    こんばんは!
    横幅いっぱいのスライダーを探していて、こちらのページにたどり着きました。
    当方、サイト制作は初心者ですがマラソンチームのHPを個人で運営しています。w
    このスライダーを気に入って、早速、ご指南通りにDLしたところ、indexの拡張子がphpになっており、
    拡張子をhtmlに変換しました。一応、私なりに作ってみたところ、上下左右に余白があり、なにか変な感じです。
    横幅いっぱいにするには、どうすればいいのでしょうか?
    ご指南いただけないでしょうか?
    何卒、よろしくお願いします。

    • mayukou
      • mayumi
      • 2014年 12月 29日

      トムさん

      ご連絡ありがとうございます!
      お返事が遅くなってしまい本当に申し訳ありません。

      そして、早速試していただいたことを嬉しく思います。

      ご質問いただいた件に関してですが、
      Skipper公式で公開されているindex.phpと、
      当ブログのHTML・CSSが合致していないということが原因の一つとして考えられます。

      スライダー設置の方法としてしましては、
      Skipper公式からダウンロードしてご使用していただくのはJquery(拡張子が.jsのファイル)のみで、
      あとは、私の公開しているHTMLとCSSおよびJSをコピーペーストしていただくだけで横幅いっぱいのスライダーになると思います。

      (もうすでに作られていたら申し訳ありませんが・・・)

      ちなみにお作りいただいているページは、スライダーとしては機能されていますでしょうか?

      Skipper公式サイトのindex.phpの場合、
      親要素が.heroとなっています。そのため、ここをwidth:100%にしなければなりません。

      こちらの場合のCSS(style.css)は、
      既に設定されているため書き直さなくて大丈夫だと思われますが・・・。

      いかがでしょうか。

      もしまたわかりづらいことがありましたら

      もう一度詳しくご説明させていただきますので

      いつでもご連絡お待ちしております。

    • トム
    • 2015年 1月 02日

    mayumiさま、あけましておめでとうございます。よろしくお願いいたします。

    Skipper公式サイトでjquery.skippr.jsはダウンロードできたのですが、jquery-1.11.0.jsというJqueryファイルがSkipper公式サイトにないようです。
    初歩的な質問ですみません。

    よろしくおねがいします。

    • トム
    • 2015年 1月 02日

    何度もすみません。jquery-1.11.0.jsというファイルは、http://code.jquery.com/jquery-1.11.0.jsから取得できました。

    mayumiさまの、公開しているHTMLとCSSおよびJSをコピーペーストして、imgフォルダ内に画像を入れてみました。
    cssで
    #container {
    height:50px;
    width:100%;
    }
    を記載してみたところ、やはり上下左右に白い余白が出てしまいます。
    お手上げ状態です。
    ご伝授、宜しくお願いできないでしょうか?

  1. mayukou
    • mayumi
    • 2015年 1月 18日

    トムさん

    ご連絡が遅くなりまして、大変申し訳ありません。

    考えられることとしましては、
    #container もしくは #theTarget要素にmarginもしくはPadding(余白)が効いている可能性があるということです。

    スタイルシート(CSS)の中に
    #container {
    padding: 数値;
    margin:数値;
    }

    #theTarget {
    padding: 数値;
    margin:数値;}

    などという記載はありませんでしょうか。

    • rook
    • 2015年 2月 12日

    スライダーをHPに組み込みたく、mayukouさんのHPにたどりつきました。何分超初心者で記載の通り試してみましたがまったくうまくいきません。
    まずskipprをダウンロードした中にjquery-1.11.0.jsがなかったのでjquery-1.11.2.min.jsを、jquery.skippr.jsとjquery.skippr.cssと一緒に、
    headに読み込みました。
    CSSのcontainerをjquery.skippr.cssに記入しました。
    その後スクリプトの設定をhead内の最後に記入しました。
    実行してみると細長い画像が上の方に現れ、スライドもしません。CONTAINERのWIDTHを変えると幅は狭くなりますが、HEIGHTを変えても変わりません。
    どうすれば実行できますでしょうか。
    素人の私に教えて下さい。

    • mayukou
      • mayukou
      • 2015年 2月 13日

      >rookさん

      コメントありがとうございます!
      またブログを見ていただいて嬉しく思います。

      ご質問の件ですが、スクリプトの部分などを中心に
      検討してみます。

  2. mayukou
    • mayukou
    • 2015年 2月 14日

    >rookさん

    skipprをダウンロードされたら、
    jquery-1.10.2.min.jsと、jquery.skippr.js、jquery.skippr.cssを読み込まれているところは、
    間違っていないと思います。
    ※jquery.skippr.cssを読み込む事を書いていなかったのは、私の記入漏れでした。
    すみません。訂正しておきます。

    読み込む際には、
    CSSの読み込むタグと
    JSの読み込むタグが違うということにはご注意ください。
    ここを間違えると、動作しないことになってしまいます。

    次に、CSSの#container の記入場所ですが、
    jquery.skippr.cssに記入していただいても問題ありませんし、
    HTML内に

    と書いていただいても問題ありません。

    ポートフォリオとは別に、今回の方法のみで
    ページを作ってみましたので、
    こちらも参考にされてください。
    よろしくお願いします。

    http://mk2012.main.jp/test/skippr/skippr.html

    • イースト菌
    • 2015年 4月 12日

    カッコいいスライダーを紹介いただきありがとうございます。
    早速サンプルをDLして自分のマシンで動かしてみました。
    スライダーは動くのですが、
    arrows :false, autoPlay :true,
    にしてみても表示も動作も変化がりませんでした
    念のため本家のサイトからzipをDLして動かすと動くのですが、今度は
    speed : 3000, autoPlayDuration : 5000,
    をどう設定してもパタパタとしか流れません
    なにかご存知でしたらお教えいただきたいです

    • mayukou
      • mayukou
      • 2015年 4月 15日

      >イースト菌さま

      コメントありがとうございます。
      スライダー実践していただいて、嬉しく思います。
      ご質問の件ですが、検証してみて
      改めてご連絡させていただきますね^^
      宜しくお願いします〜〜

      • 元大橋キャンパス
      • 2015年 5月 17日

      はじめまして。
      とてもわかりやすく、簡単に設置できました!
      わたしも「// オプションを指定してSkipperの実行」の部分を変えても何も変化がなく、、、。

      もし解決方法が見つかれば教えていただきたいです!!

    • おはな
    • 2015年 8月 17日

    こんばんは。
    画面横幅いっぱいのスライダーを探しておりまして、こちらのサイトで紹介されておりますSkipperを使用してみました。わかりやすい日本語で、私でも導入できました!
    HTML作成時は問題なかったのですが、いざWordpress、PHPに落とし込んだ際に、Skipperの部分がうまく表示できませんでした。

    index.phpのスライダー部分を

    上記のHTMLから下記のように書き換えましたところ、Skipperの部分が表示されません。

    <div style="”>

    もし原因お分かりでしたら、ご教授いただけますと幸いです。
    宜しくお願い致します。

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 色々宣言!?2016年の振り返りと来年の抱負
  2. メリークリスマス☆ハイアットのケーキや、ケンタッキーのチキン…
  3. wordpressバックアップツールの決定版!All in …
  4. 【お仕事紹介】学生向けアンケートパンフレット作りました
  5. 【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

facebook更新中!

  1. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。
  2. Photoshop

    ちょっと洒落てる!Photoshopで作る、白いシャドーが入った押したくなるボタ…
  3. Photoshop

    イラストをスタンプにしよう!描いたイラストをphotoshopのカスタムシェイプ…
  4. デザイン

    デザインの引き出しを増やすために!スクラップがオススメ♪
  5. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
PAGE TOP