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デザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。

詳しくはこちら


Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  2. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  3. Photoshop

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

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

  4. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

  5. jQuery

    ボックス要素を横並びにしたときに高さが揃えられるJQuery、jquery.matchheight.…

    みなさんこんにちは、mayukouです。今回はwebデザインするとき…

コメント

  • コメント (20)

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

    • トム
    • 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="”>

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

    • mayukou
      • mayukou
      • 2017年 3月 10日

      >おはなさま

      返信が遅くなりまして、大変申し訳ございません。わかりやすいというお言葉、ありがとうございます。

      問題の部分ですが、
      もしかしたら、JSファイルが読み込まれていない可能性があります。
      wordpressにJSを読み込む際は、JSファイルのパスを変更する必要があります。
      テーマファイルの中の
      jsフォルダの中に入っている場合は、
      < ?php echo get_template_directory_uri(); ?>/js/jquery.skippr.js
      というパスになります。

      ご参考になれば幸いです。どうぞよろしくお願いします。

    • 蘭丸
    • 2017年 2月 17日

    初めまして。
    Skipperを利用しようと思い、色々とみているうちにこちらにたどり着きました。
    現在、Skipperの動きは問題ないのですが
    IEとEDGEのみ、ブラウザの右に大きな空白が生まれてしまいます。
    こちらの設定ミスかとも考えましたが、Skipper本家も同様の症状になっております。
    ですが、こちらのサイトをIE、EDGEで開けたところ
    空白が生まれておらず、他のブラウザと同じになります。

    何かしらブラウザの設定記述がありましたらご享受お願いできないでしょうか。
    宜しくお願い致します。

    • mayukou
      • mayukou
      • 2017年 3月 10日

      >蘭丸様

      お返事が遅くなり、申し訳ございません。
      こちらのサイトを見ていただき、ありがとうございます。
      いろいろと原因を考えてみたのですが、確実な答えがお伝えできませんので、
      もう少し調べてみますね。またお返事いたします!

        • 蘭丸
        • 2017年 4月 17日

        お返事ありがとうございます。
        現在も時間の合間を見てはいろいろとやっておりますが、いまだ解決しません;;
        お時間のある時にでも調べていただければありがたいです。
        またお伺いしますので、宜しくお願い致します。

        • 蘭丸
        • 2017年 5月 17日

        CSSのhtmlに
        overflow-x: hidden;
        と設定すれば直りました。

        お時間をとらせてすいません。
        ありがとうございました。

    • たまぞう
    • 2017年 4月 24日

    初めまして。
    とても分かりやすく説明されているので、とても勉強になっています。
    ただ初心者なもので、四苦八苦しながら勉強中です。
    そこで教えて頂けると嬉しいのですが、そちらで案内されている以下のナビを例えばskipprのスライド上の上部にメニューを透過して設置する場合はどのようにしたらいいでしょうか。
    https://web-design-cafe.com/archives/867
    記述する部分が悪いのか、表示されなかったり、変な場所に表示されたりします。可能であれば、タイトルなどを中心に透過させて表示もしてみたいのですが。

  3. 昨日、ご相談をお送りさせて頂きましたが問題クリアしましたのでありがとうございました。

    • ファンレター
    • 2017年 6月 14日

    ほかのサイトで相談して問題解決しました。ありがとうございました。

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. コピーライティング

    コピーライティングを学ぶ。わたしがやっている勉強法とコピーの作り方
  2. illustration

    混色できる水彩画テイストの表現が可能なipad proアプリ!Tayasui S…
  3. デザイン

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

    Mac OS sierra にアップデートした時のIllustratorCS6の…
  5. Mac

    仕事が早く終わる!集中力を持続して生産性アップできるPomodoroのアプリがオ…
PAGE TOP