FlexSlider.jsサムネイル、カルーセル対応の軽量スライダー

公開日:  最終更新日:2022/08/27

[jQuery]サムネイル表示/カルーセル表示 軽量スライダーFlexSlider.jsサンプルソース有り
ネットショップ等のサイトではよく利用されているスライダーですが、様々なjQueryプラグインが公開されています。それぞれに特徴もありますが、いくつか使えるものを覚えていけば困ることはないでしょう。

先日の記事

上記、記事で紹介したイメージスライダーですが、使い勝手が良さそうなので別のサンプルを紹介したいと思います。

本日は、サムネイル表示とカルーセル表示の2通り使い方のサンプルを紹介しますね。
2013.9.20 追記しました

サムネイル表示・カルーセル表示 両方に対応したスライダー「FlexSlider.js」

サムネイル表示、カルーセル表示と言われてもどんなイメージかわからない方もいるかもしれません。
例えば、こちらのショップ
スマホケースのHameeストラップヤ

ショップオブザイヤー2012で
「TV・オーディオ・カメラ」ジャンル賞を受賞しているショップ

↓↓↓のエリアを見てもらうと大きめのメイン画像がスライドして入れ替わっています。
先日もメイン画像が切り替わる仕組みとして紹介しましたが、メイン画像の下に小さい画像(サムネイル画像)を表示しているパターンです。
47-1.png
こちらは、複数の商品画像を並べていますね。
カルーセル表示と呼ばれる表示方法ですね。これと似たような表示をすることも可能です。
47-2.png
以上、2つと似たような表示方法を紹介していきます。

実装方法について(サムネイル表示)

先日の記事内容と重複しますが、念のため書きますね。下記より必要ファイルをダウンロードしてください。

Flexsliderの公式サイトより、ファイル一式をダウンロードしてください。※H30.3.14現在はflexsliderのバージョンも変わっていますが、基本的な実装方法は変わりません。

ダウンロードしたファイルの中の
「jquery.flexslider.js」「flexslider.css」の2つのファイル
「images」フォルダとその中の画像を使用します。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

サンプルソース(サムネイル表示) sample1.html

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});
</script>
 
<div class="flexslider">
<ul class="slides">
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
</ul>
</div>

1、2、3行目 ダウンロードした3つのファイルを読み込みんでいます。
(GOLD内にアップするのを忘れないでください。また、パスも環境に合わせて変更してください)

4~11行目で スライダーの設定、実行をしている部分です。
ここで、動き、表示等の設定をすることが出来ます。
ポイントは controlNav: “thumbnails” でナビ表示部分にサムネイル指定しているところサムネイル画像を指定している部分が<li data-thumb=”サムネイル画像URL”>です。

自動的に縮小表示してくれるので、メイン画像と同じURLでも問題ないかと思います。サンプルでは記述してませんが、<li> </li>内の画像に対してリンクタグも設定することも出来ます。

動作サンプル(サムネイル表示)


実装方法について(カルーセル表示)

次に、カルーセル表示
サンプルソース(カルーセル表示) sample2.html

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 100,
    maxItems: 2,
    itemMargin: 0
  });
});
</script>
 
<div class="flexslider">
<ul class="slides">
  <li>
    <img src="画像URL">
    <p class="flex-caption">イメージ1の説明</p>
  </li>
  <li>
    <img src="画像URL">
    <p class="flex-caption">イメージ2の説明</p>
  </li>
  <li>
    <img src="画像URL">
    <p class="flex-caption">イメージ3の説明</p>
  </li>
  <li>
    <img src="画像URL">
    <p class="flex-caption">イメージ4の説明</p>
  </li>
  <li>
    <img src="画像URL">
    <p class="flex-caption">イメージ5の説明</p>
  </li>
</ul>
</div>

動作設定部分で itemWidth: 100 表示アイテムの幅を設定しています。
maxItems: 2 で表示するアイテム数を指定

表示アイテム数や、自動スライドありなしなど、自分好みにカスタマイズできそうですね。

動作サンプル(カルーセル表示)

「>」と「<」の画像が表示されない場合の対応

H25.9.20追記しました
「>」「<」の画像が表示されないとコメントで頂いたので確認してみました。
現在、ダウンロードしたファイルが以前と変わっているようです。

まず、「>」「<」の画像がimagesフォルダ内に存在しません。
↓↓の画像を右クリックから保存してお使いください。
(オリジナルで画像作成しても良いかと思います)

arrow.png
imagesフォルダに画像を入れておく必要がありますので注意してください。


「flexslider.css」の内容も変わっていました。

71行目 content: ‘\f002’;
72行目 content: ‘\f001’;
で<>を画像ではなく文字で指定しているようですがフォントの関係でブラウザによってはうまく表示されないようです。
文字ではなく、画像に置き換えたい場合は、content: ”; に変更してください。
(画像ではなく文字で良いのであれば content: ‘>’; content: ‘<’;でもOKです)

画像に置き換える場合は(↑のarrow.pngに合わせて記述してます)
64行目 .flex-direction-nav a の記述
widthを40px → 30pxに変更(使う画像に合わせて調整)

67行目 .flexslider:hover .flex-prev の記述
background: url(images/arrow.png) no-repeat left;
を追加してください。

68行目 .flexslider:hover .flex-next の記述
background: url(images/arrow.png) no-repeat right;
を追加してください。

(左右別々の画像を用意する場合は、最後のleft,rightは不要です)
以上で「<」「>」の画像が表示されると思います。


また、画像の上に Next Previous と表示される場合は(IEで確認できた現象)
「jquery.flexslider.js」の
1062行目 prevText: “Previous”,
1063行目 nextText: “Next”,
となっている部分を

prevText: “”,
nextText: “”,

に変更してみてください。

カルーセル表示のサムネイル位置を右側に縦方向に並べる

H26.12.17 追記しました
コメントにて1つ目のサンプル「サムネイル表示」について

>サムネイルを大きい画像の右側に、縦方向に並べることは可能でしょうか?

と頂いたのでCSSで調整してみました。

調整したCSSファイルはこちら

調整内容としては簡単に書きますが
・メイン画像の表示の幅を調整 100% → 80% (.flex-viewport)
・ナビゲーション部分の幅調整、float:leftの追加 (.flex-control-nav)
・サムネイル画像部分の調整 (.flex-control-thumbs)
・各項目の余白部分の調整

念のため、最新のファイルを再度ダウンロードして調整してみました。

もしかすると調整不足でブラウザ等の環境の違いによっては正常に表示されないかもしれないので、利用する際は各ブラウザで表示確認してみてください。

サムネイル位置を右側に縦方向 Chromeでの初期表示のずれについて

H27.2.10 追記しました
やはり調整不足があったようでコメントにて

>ページを表示した際に画像表示の際、1枚目が左側にズレて2枚目も最初だけ表示されてしまいます。
>2枚目に移動すると、そこからは通常表示されるのですが。。。

というのを頂いたので調べてみました。

調べた限りChromeだと上記のような現象になるのを確認出来ました。
CSS等調整してみたのですが、どうもうまく行かなかったので少し強引な方法ですが対応策を考えてみました。

※横幅等が固定サイズでの利用が前提の対応策ですのでご注意ください。
レスポンシブな使い方をしている場合は、この方法では対策出来ません。
※jQueryのバージョンが1.8以降が必要

まず、ulタグにid属性を付けます。名前は任意
<ul class=”slides” id=”myslider”>

サムネイル表示のソースのjavascript部分に追記します。

<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});

document.addEventListener('DOMContentLoaded',function(){
  var element = document.querySelector('#myslider'); 
  element.style.webkitTransform = 'translate3d(-394px, 0px, 0px)';
});
</script>

9行目から12行目の内容を追加します。
chromeで処理を追いかけてみたところ初期表示の画像切り替え位置がずれていることまでは確認できました。そこで初期位置を強引に追加した処理で設定しています。

注意が必要なのはサムネイル付きスライダーの外側の幅に応じてtranslate3d(-394pxの値を調整する必要があります。

下記はおおよその目安です。調整する際の参考にしてみてください。
外側の幅 500px の場合 -394px
外側の幅 600px の場合 -474px
外側の幅 700px の場合 -554px

うーん、おそらくサムネイルを横に縦型表示するのに調整したCSSが影響しているのは確かなのですが、どの部分が問題なのか見つけれませんでした。

固定サイズでの利用ならこの方法で対策は可能ですが、レスポンシブが売りのスライダーでもあるので・・・

また、調べてみようとは思いますが取り急ぎの強引な対応策でした。


限られたスペースで色々な情報を表示できるスライダーなのでぜひ、活用してみてください。

スライダーに関する別記事
H30.3.14 jQuery不要のスライダー

H30.3.14 他のjQueryプラグイン

H25.9.23 別サンプルについて記事追加しました。

H25.11.9 別の仕組みですがスライダー記事追加しました。

H30.03.14 jQueryプラグインについては以下にまとめています




Comment

  1. MM より:

    ネットショップで一番使われているこの形、あれこれ探してもなかなかHITせず、ようやくここにたどりつきました。
    超初心者の私でも、ここの説明が一番わかりやすく、なんとかスライドさせることができました。
    ただ、いざ表示させてみるとサンプルで言う「>」(next)、「<」(prev)の部分が何故か「fl」となってしまいます。
    imagesフォルダもアップロードしてますが、なにせ超初心者のため、どこを確認していいのかすらわかりません。
    ご教授いただけますと幸いです。

  2. MM より:

    他のファイルもアップロードしなければいけなかったんですね。
    超初心者よりもレベルが低かったようです、すみません。
    無事<と>が表示されました。
    何はともあれ、ここが一番わかりやすかったです。ありがとうございました。

  3. peacepopo より:

    コメントありがとうございます。
    自己解決されたようで実装出来きて良かったです。
    ぜひ、活用してみてください。

  4. とみ より:

    サムネイル表示、カルーセル表示も出来る軽量スライダー FlexSlider.js
    (カルーセル表示)の方のサンプルソースをコピペしましたが、表示されません。
    もちろん、
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.flexslider.js"></script>
    ここだけはファイルアップロード先のURLに変えていますが。
    それ以外は、そのままです。
    ホームページは、カラーミーで作っています。
    ちなみに、[楽天]商品画像を横に自動スライドするjQueryプラグインの方は、参考にさせていただき、問題なくうまく表示されたのですが。。。
    なんとかうまく表示させたいのですが、原因がどこにあるのかよくわかりません。
    ご教授ください。よろしくお願いいたします。

  5. peacepopo より:

    とみさん コメントありがとうございます。
    表示されないというのは、画像など何も表示されないということですかね。
    であれば、下記2行のどちらか、もしくは両方が正常に読み込まれてない可能性があります。
    > <script src="jquery.min.js" type="text/javascript"></script>
    > <script type="text/javascript" src="jquery.flexslider.js"></script>
    再度、ファイル名、パスなど確認してみてください。
    まずは、htmlファイルと同一フォルダ内に「jquery.min.js」「jquery.flexslider.js」
    を配置して確認するのが良いかもしれません。
    > ホームページは、カラーミーで作っています。
    [補足] カラーミーであれば
    src="jquery.min.js" の部分を
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&quot;
    に変更することも可能です。(Googleのサーバーから読み込む)

  6. とみ より:

    ありがとうございます!!
    試行錯誤して、なんとか、両方とも表示できました!!
    原因は、たぶんですが、jquery.min.jsのバージョン違い?だと思います。
    教えていただいた、
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&quot;
    に変更すると、両方ともうまく作動いたしました!
    あまり詳しくないので、何とも言えないですが、
    flexsliderが最新??のjquery.min.jsに対応していなかったのかなあと思います。
    あと、もうひとつ、一番初めのコメントにもありますが、
    > サンプルで言う「>」(next)、「<」(prev)の部分が何故か「fl」となってしまいます。
    の解決方法ってなんですか?
    今、Fo01、Fo02になっています(汗)。

  7. peacepopo より:

    > あと、もうひとつ、一番初めのコメントにもありますが、
    > > サンプルで言う「>」(next)、「<」(prev)の部分が何故か「fl」となってしまいます。
    > の解決方法ってなんですか?
    > 今、Fo01、Fo02になっています(汗)。
    「flexslider.css」と同一階層に「images」フォルダ(フォルダ内に<>画像がある状態)
    をアップロードしてみてください。

  8. とみ より:

    「images」フォルダの中には、 prev < と next > の画像は入ってなかったです。
    「images」内の bg_play_pause.png は、再生と一時停止のボタンだけです。
    cssを変えて、なんとか自分の画像で行けました!
    cssも bg_play_pause.png を参照するような記述がなかったように思います。
    なにはともあれ、このサイトと管理者様のおかげで、うまくいきました!!
    どうもありがとうございます!
    また、参考にさせていただきますので、更新頑張ってください!!

  9. peacepopo より:

    とみさんへ
    実装出来たようで良かったです♪
    また、貴重な情報ありがとうございます。
    こちらでも最新の情報をまた確認してみたいと思います。

  10. ケイ より:

    初めまして!こちらのスライダーでいろいろ勉強させていただいております!
    質問ですが、サムネイル表示のスライダーは4枚まででしょうか? 5枚目を入れるとサムネイルが2行になってしまいます。 4枚以上入れるときにはどのようにすればいいですか?
    後、、メイン画像にマウスを持ってきたときにサイドに「NEXT」「PREV」の矢印を入れたいのですが、どのようにCSSを記載すればいいですか? 今、マウスを持っていくと下線だけでます。 自分で作った画像を入れたいのですが、教えていただけたら助かります。  
    宜しくお願いします!

  11. 匿名 より:

    こんばんわ。
    上記のサムネのスライダーなのですが、「>」と「<」のマークが出ません。
    ダウンロードした中にもアイコンの画像が無く(再生と一時停止のみ)、
    どおしていいか・・・

  12. peacepopo より:

    コメントありがとうございます。
    「>」と「<」の画像が表示されない対応方法について
    追記しましたので、確認してみてください。

  13. peacepopo より:

    ケイさん コメントありがとうございます。
    > 質問ですが、サムネイル表示のスライダーは4枚まででしょうか? 5枚目を入れるとサムネイルが2行になってしまいます。 4枚以上入れるときにはどのようにすればいいですか?
    サムネイル表示している部分をスライダー表示にしたいということだと思うのですが、お急ぎの場合はダウンロードしたファイル内のdemoフォルダにある thumbnail-slider.html が参考になるかと思います。
    また、後日 記事にまとめようとは思います。

  14. bun より:

    かなり参考になりました!ありがとうございます。
    1点質問です。
    楽天のサイトでカルーセル表示のバナーを
    使わせていただいているのですが、
    iframeで呼び出して使った時に
    画像にリンクを貼るとiframeの中(指定したwidth heght)にリンク先のページが表示されてしまいます。
    リンク先をblankすれば大丈夫だったのですが、別ページで表示したくない場合はどうすればいいのでしょうか?
    教えていただけると助かります。

  15. peacepopo より:

    bunさん コメントありがとうございます。
    >画像にリンクを貼るとiframeの中(指定したwidth heght)にリンク先のページが表示されてしまいます。
    >リンク先をblankすれば大丈夫だったのですが、別ページで表示したくない場合はどうすればいいのでしょうか?
    現在、リンクの設定部分には target="_blank" とされているかと思いますが、
     target="_top" もしくは target="_parent" に変更すれば同一ウィドウでのページ切替になります。
    (それぞれ違いは _top :一番上の階層、 parent:1つ上の階層となります。)
    一度、試してみてください。

  16. bun より:

    なおりました!ご丁寧にありがとうございます!
    これからも参考にさせていただきます。

  17. ひろ より:

    ご返信ありがとうございます
    すいません詳細が記されていなくて・・・
    http://peacepopo.net/blog-entry-47.htmlの
    サムネイル表示をやっておりました
    ありがとうございます
    ようやく動き出しました
    ご返信本当にありがとうございました

  18. hana より:

    はじめまして。
    参考にさせていただき、なんとか設置ができました!!
    ただ1点だけ解決できず、可能であればご教授いただきたくコメントさせていただきました。
    スマホサイトで使わせていただいており、
    サムネイルを4列でなく3列にするには、どこをいじればよいのかわかりません。
    cssのslidesかな、と思ったのですが、、><
    ご教授頂けましたら幸いです。

  19. peacepopo より:

    「サムネイル部分を4列ではなく3列にするには?」
    という質問を頂きました。
    連絡先の記載がなかったのでコメント蘭にて回答しますね。
    flexslider.css 内にある(最新バージョンだと88行目)
    .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
    上記の width: 25%; となっている部分を 33% に変更してみてください。
    1つのサムネイルの幅を全体の33%(3分の1)にするという変更になります。

  20. mina より:

    <>カーソル部分がどうしても表示されなくて、
    困っていたところに
    表示されないで検索かけてたどり着き、
    無事にできました!
    大変助かりました☆
    ありがとうございました(^^)

  21. ann より:

    はじめまして。
    ネットショップにスライダーをつけたいと思っていたところ、とてもわかりやすい説明とサンプルを見つけることができとても助かりました。

    もしよろしければ教えて頂きたいのですが、
    こちらのサンプルは、大きい画像の下にサムネイルが並んでいるデザインになっていますが、サムネイルを大きい画像の右側に、縦方向に並べることは可能でしょうか?

    現在作成しているページのデザイン上、そういった作りのものが欲しいなと思っているのですが、初心者の為、どこをいじっていいのかわからず…
    教えていただければ幸いです。

  22. yu より:

    サムネイル表示で実装してみたのですが、メイン画像、サムネイルを含めた全体の画像の大きさを調整するにはcssのどの部分を調整すればよいですか?

    ちなみにサムネイルは右側につけています。

    • peacepopo より:

      yuさん

      全体の画像の大きさ調整についてですが、%で設定されているので

      <div class=”main” style=”width:600px;”>
      <div class=”flexslider”>

      </div>
      </div>
      上記の場合は、外側のコンテンツが幅600pxとなっているので、スライダー部分の幅は600pxになります。

      また、Iframeでスライダーのみを作成したページを埋め込むのであれば、埋め込む際のiframeの幅に合わせてスライダー部分の画像の幅が表示されます。

      • yu より:

        peacepopo さん

        スライダーのみのページを作り、Iframeで幅を指定し調整したところぴったり表示されました。

        ありがとうございました。

  23. ann より:

    お世話になっております。

    サムネイルを右側に並べるデザインのサンプルありがとうございました!
    とてもわかりやすい説明で、無事設置することができそうです!

    親切にご対応頂いて本当にありがとうございました!

  24. colonnello より:

    はじめまして。

    サムネイルを右側縦方向に並べるというのを探していたので早速試してみたのですが、

    ■メイン画像の表示の幅を調整 100% → 80% (.flex-viewport)

    の数値を変更した分だけ(残り20%分をサムネイル部分に)
    ページを表示した際に画像表示の際、1枚目が左側にズレて2枚目も最初だけ表示されてしまいます。

    2枚目に移動すると、そこからは通常表示されるのですが。。。
    何か対策があれば、教えて頂けますと幸いです。

    • peacepopo より:

      colonnello 様

      コメントありがとうございます。
      記事内に対応策を追記してみましたのでご確認ください。

  25. HM より:

    はじめまして。
    いきなりのご質問で申し訳ございません。

    動作サンプル(サムネイル表示)を取り入れたいと思っておりますが、
    画像サイズを変更した際、右側にでております【>】が
    画像の外にでてしまいます。

    【>】の位置を変えたい場合どこを変更すればよろしいでしょうか。
    初歩的な質問で申し訳ございません。

    よろしくお願いいたします。

    • peacepopo より:

      HM様

      コメントありがとうございます。
      動作サンプル(サムネイル表示)を取り入れたいとのことですが、
      画像サイズはどうやって変更されていますか?

      ↑のコメントにも記載しておりますが、画像のサイズはスライダー部分の外側の要素のサイズに
      応じて自動的に変わります。
      <div class=”main” style=”width:600px;”>
       <div class=”flexslider”>

       </div>
      </div>
      上記の場合は、スライダー外側のコンテンツが幅600pxとなっているので、スライダー部分の幅は600pxになります。
      また、Iframeでスライダーのみを作成したページを埋め込むのであれば、埋め込む際のiframeの幅に合わせてスライダー部分の画像の幅が表示されます。

      たとえば、動作サンプルのURLページを直接ブラウザで開いてみてください。
      http://peacepopo.net/wp-content/uploads/47-1.html

      ブラウザの画面いっぱいに画像が表示されるかと思います。
      その状態でブラウザのウィンドウサイズをドラッグで変更するとウィンドウサイズに応じて
      画像サイズも連動して変わるようになっています。

      もし、大きめの画像サイズにしていて幅が860pxを超えた場合は
      通常時には<>が表示されずマウスオーバー時にしか<>が表示されません。

      対応方法としてはCSSファイルの最後にある
      @media screen and (max-width: 860px) {
      .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
      .flex-direction-nav .flex-next {opacity: 1; right: 0;}

      のmax-width: 860px 部分のサイズを大きくすれば常に<>が表示されるようになります。

      CSS内で<>に関連する記述を探すには
      .flex-next や .flex-prev 等で検索すれば見つけることが可能です。

      HM様の現在の状況がうまく把握できていないので思いつくことを記述してみました。

  26. me より:

    はじめまして。
    flexsliderに関して試行錯誤の末、
    こちらのサイトがとても分かりやすく大変助かりました。ありがとうございます。
    初歩的なことかもしれませんがよろしければご教授ください。
    divタグで横幅の大きさを指定し、その中にスライダーを入れています。
    divの中いっぱいに画像が表示されるのではなく、右側に余計な余白が出てしまっているのです。
    よく見ると右のナビゲーションの矢印が余白からスライドして出ているような状態なのですが…
    この余白をなくすにはどうしたらいいのでしょうか。
    ご教授いただけたら幸いです。

    • me より:

      ごめんなさい、自己解決です。
      いろんなサイトをめぐっているうちに、
      CSSの.flexsliderにwidth:80%を追加していたので左にずれてしまっていたようです;
      新しくDLしなおして解決しました!
      お騒がせしました><

  27. baian より:

    はじめまして。
    Webページ作成に四苦八苦している初心者です。
    教えていただきたい事があり、コメントさせていただきました。

    jQueryを使って、スクロール量に応じて画面上部にメニューが固定表示されるページを作りました。
    そのページにflexsliderを組み込んだところ、flexsliderの部分だけメニューの上を通過し、通過時はメニューが隠れてしまいます。

    flexsliderを組み込む前は、全てがメニューの下を通過するので、常に(一定量スクロール後)メニューが見える状態でした。

    この問題の解決方法が全く分かりません。
    ご教授いただけたら幸いです。
    よろしくお願いいたします。

    • peacepopo より:

      baian 様

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

      頂いたコメントの内容から推測すると要素の重なり順序が「flexslider」の方が上になってしまっているのではないかと思われます。

      cssで「z-index」について調べてみてください。

      固定メニューに対して指定されているz-indexとflexsliderに指定されているz-indexの値を調整してみてください。
      固定メニューが手前に表示されるには、「固定メニューのz-index」>「flexsliderのz-index」とする必要があります。

      参考
      http://digilog.client.jp/css/zindex.html

  28. 埼玉のかえる より:

    いつも貴重な情報をありがとうございます。

    jQueryのプラグインを使用して、スライダーをティッカーモードで、垂直方向に向かって動かしたいと思っています。設置画像の枚数は、10枚程度、常時表示枚数は、5枚程度を予定しています。

    「bxslider」「jcarouselLite」「slick」を使ってサンプルを作成してみたのですが、どれもスクロール方向が下から上がデフォルトとなっているみたいです。これらのプラグインの中で、オプション設定で、スクロール方向を上から下へ変更できるものはありませんでしょうか?

    あるいは、別の方法で、スライダーをティッカーモードで垂直方向に上から下へ動かせるものがありましたら、ご教授いただけると幸いです

    • peacepopo より:

      埼玉のかえる 様

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

      「bxslider」「jcarouselLite」「slick」で上下のスクロール方向を変更する方法についてですが、おそらくデフォルトのオプション指定では逆には出来ないのではと思われます。

      ただし、「jcarouselLite」の例ですが
      プラグインのファイル(jcarouselLite.js)を直接編集する方法なら以前に試したことがあり可能です。

      参考 http://2hnflw.blogspot.jp/2011/10/jcarousel-lite.html

      利用されているバージョンによって修正箇所が変わってくるのですが、私が修正したファイルの場合は、350行目付近に該当の記述がありました。

      interval = setInterval(function() {go(curr+o.scroll)}, Number(o.auto+o.speed));

      上記の記述にあるcurr+o.scroll → curr-o.scroll に変更することでスクロール方向を逆にすることができました。

  29. 埼玉のかえる より:

    返信が遅れてしまい、すみません。

    bx-sliderのオプション設定で、以下の3パターンを試してみましたので、ご報告します。
    1)autoDirection: ‘next’ + tickerHover: true,
    設定:スクロール方向は下から上、オンマウスで止まる。
    結果:正常稼働しました。

    2)autoDirection: ‘prev’ + tickerHover: false,
    設定:スクロール方向は上から下、オンマウスで止まらない。
    結果:正常稼働しました。

    3)autoDirection: ‘prev’ + tickerHover: true,
    設定:スクロール方向は下から上、オンマウスで止まる。
    結果:暴走しました。

    (3)でうまく動くとよかったのですが。。。教えていただいた方法を試してみます。貴重な情報をいつも、本当にありがとうございます。

  30. ゆゆゆ より:

    はじめまして。
    試したいと思ったのですが、http://jquery.com/のjquery.min.jsファイルをどこでダウンロードするのかわかりません。
    宜しくお願い致します。

    • peacepopo より:

      ゆゆゆ 様

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

      ページの右にある「Download jQuery V3.3.1」から最新のファイルはダウンロードできるかと思います。ただし、この記事を書いた時点のバージョンのjQuery以外では動作しない可能性があります。

      設置する環境が外部URL参照が可能であれば、jqueryからダウンロードせずとも
      src=”jquery.min.js”の記述を
      src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”
      とすることでjQueryを読み込むことも可能です。

      また、外部URLの参照が使えない場合は、ブラウザに直接さきほどのURL
      https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
      をコピペ等で入力して内容を表示して名前を付けて保存で「jquery.min.js」として保存して使うのも可能です。

  31. ichimon より:

    はじめまして。
    スマホページのスライドバナーで使用させていただきました。
    とても参考になって助かりました。

    一つ質問があります。
    サムネールの下の余白についてですが、少し余白が大きすぎて次の画像とスペースが空きすぎています。
    この余白を埋めるにはflexslider.cssのどの個所のタグを修正すればいいのでしょうか?
    ご教授願います。

    • peacepopo より:

      ichimon 様

      コメントありがとうございます。返信遅くなり申し訳ありません。

      >サムネールの下の余白について
      サムネイル下の余白についてですが、
      flexslider.css内の42行目付近(利用しているCSSのバージョンによって場所が違うかもしれません)
      下記のような記述があります。

      /* FlexSlider Default Theme
      *********************************/
      .flexslider {margin: 0 0 60px;

      上記の60px部分を調整してもらうと余白を調整できますのでご確認ください。
      それでは、よろしくお願いいたします。

Your Message

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑