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

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

関連記事

  1. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  2. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

  3. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  4. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  5. Web Design

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

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

  6. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

    みなさんこんにちは、mayukouです。ランディングページやネットシ…

コメント

  • コメント (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


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Mac

    アプリケーションをすぐに起動できる!Alfredの使い方
  2. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス
  3. food photo

    写真

    カメラ上手に!食べ物を美味しく撮るコツとは?
  4. iPad Pro

    今や欠かせない存在!iPad Pro “9.7を購入して、約3ヶ月が…
  5. お知らせ

    レバテック様よりphotoshopプラグインの記事が紹介されました
PAGE TOP