HOME > Jquery > flexsliderの使い方(デモ)とオプションの日本語訳。レスポンシブスライダー、フリックスライドにも対応

本ページはプロモーションが含まれています

flexsliderの使い方(デモ)とオプションの日本語訳。レスポンシブスライダー、フリックスライドにも対応

Flexsliderの使い方設定例

<script type="text/javascript">
$(function(){
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
easing: "easeInExpo",
slideshowSpeed: 10000,
animationSpeed: 1700,
animationLoop: false,
controlNav: false,
directionNav: false
});
});
});
</script>

【設定解説】
・アニメーションはフェード。
・イージングはeaseInExpoっていうちょっと風変わりなやつを。こちらを参照
・スライドスピードは10秒。
・フェードが切り替わるのに1.7秒。
・ループはさせない。
・コントロールナビ（まるポチのボタンたちね）は非表示。
・スライド送りボタンは非表示。

<script type="text/javascript">
$(function(){
$(window).load(function() {
$('.flexslider').flexslider({
animation:"slide",
prevText: "こっち",
nextText: "あっち",
before:function(){$('.slides li a').fadeTo(400,0.4);},
after:function(){$('.flex-active-slide a').fadeTo(800,1);}
});
});
});
</script>
・アニメーションはスライド。
・前に戻るボタンのテキストは”こっち”。
・次に行くボタンのテキストは”あっち”。
・スライドが動く前に、スライドたちは不透明度40%に。
・スライドたちが動き終わった途端にフェードインして透明度なしに。

最近サーバーのモラルがゆらでいる気がするのでオバサンが間違えて借りるレンタル専用サーバーでまとめてみた。

▼この記事には続きがあります。

ページ: 1 2 3 4

13 Replies to “flexsliderの使い方(デモ)とオプションの日本語訳。レスポンシブスライダー、フリックスライドにも対応”

  1. […] 参考：flexslider-Jqueryスライダーの使い方とオプション日本語訳。レスポンシブ、フリックスライドにも対応 | 焦点 […]

    返信する

  2. 始めまして。山田と言います。
    独学でネットショップを構築しを運営しています。
    制作ソフトは恥ずかしいですがＨＰＢ16です。
    今、これまで何年も眠らせてしまっていたショップの復活を期して、
    レスポンシブ化したスマホ主体のネットショップを構築中です。

    動的に商品を見せるのに「FlexSlider」を使っています。
    今現在もクローム、サファリ、ＩＥともに上手くレスポンシブして機能しています。

    ただ今現在はメイン画像の下にサムネイル画像が横1段に4個。
    それが3段で合計12枚のスライダー表示となっています。
    縦長の画像の表示なのでスマホ画面ではサムネイル画像が大き過ぎ
    クリック出来なくなっているのが現状で困っています。
    サムネイルを一行に6画像。2行で12枚の画像表示にしたく思っています。
    また、1行でサムネイル8画像等も出来れば有難いのですが。

    http://www.waterplanet.jp/zzzzzflexslider.html

    色々ネットでも調べますが全く解答は出て来ません。

    flexslider.css スタイルシート
    http://www.waterplanet.jp/style/flexslider.css

    .js ファイルです。
    http://www.waterplanet.jp/style/jquery.flexslider.js

    突然のぶしつけな質問で大変申し訳ありませんが、
    本当に困っております。

    ご教示を頂けますと有難く思っております。
    もし可能でしたら宜しくお願い致します。

    返信する

    • .flex-control-thumbs li {width: 25%; float:
      left; margin: 0;}
      ここのwidthを16.6%とかにすれば六個に並ぶんじゃないですかね。
      もし画面サイズで分岐したければCSSのメディアサイズ（わからなければ調べてみてください）でスマフォ、PC、タブレットごとに並びを調整できるはずです。

      どちらかと言うとjavascriptのプラグインうんぬんというよりもCSSの問題ですね。

      返信する

      • ありがとうございます。
        早速アドバイス頂いた通りcssの記述を一部変えたら思い通りに行きました。
        私自身、「four」や「4」の1/4としてcssやscriptから探しても無かった筈ですね。
        まさか％での分割とは思いませんでした。
        本当に早速のアドバイス有難うございました。
        約５日間悩んでいた胸のつかえが取れてスッキリ！です。
        重ね重ね有難うございました。

        返信する

  3. すみません、追伸です。
    Flexslider以外にもテストしているスライダーがあります。
    こちらはサムネイル画像表示数を予めカスタマイズ出来る前提のものです。
    日本人の方の制作された非常に優れた作品と思います。

    ただ、問題が有ります。レスポンシブ化されているのですが、
    カラム内での取り決めがないのでスマホ画面程度に
    ブラウザを縮めたタブレット縦画面ではレスポンシブが効かずに
    スライダーがメインカラムを飛び出し、サブカラムに覆い被さってしまいます。
    http://www.waterplanet.jp/02-shop/01-r3/r3-707/r3wp-707.html#link

    制作者の方にお伺いしましたがやはり現在の構成上はカラム内での設置は
    想定していなかったのでこのままでは無理と言う事でした。

    そこで今回の「FlexSlider」に変えようと思ったのですが、
    サムネイル表示画像数がネックとなり困り切っています。

    もし宜しければアドバイス頂けますと有難く思います。

    返信する

  4. お世話になります。宜しくお願い申し上げます。Windows 8.1　にて「flexslider」を用いたホームページを作成し、全く問題無く動作しております。
    ところが、Ｗｉｎｄｏｗｓ　ＸＰ機では、「Ｇｏｏｇｌｅ　Ｃｈｒｏｍｅ」では、正常に動作するのですが、
    Ｉｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ　８　で表示させると、画面の右側に次に表示する画面がくっついて表示されてしまいます。右側の画面は、本来の表示枠の外まではみ出しています。管理者ツールを使用したのですが、原因がわかりません。ＣＳＳも見てみたのですが、管理者ツールで表示された様な不具合が見わたらないです。
    どこをどう直したら良いのかご教授をお願い致します。

    ]

    返信する

    • Ｉｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ　8が問題で、WINDOWSのOSの違いはとりあえず排除していいと思います。
      たぶん、なんかしらの影響でOverflowがはずれているんじゃないでしょうか。
      .flexslider {
      overflow:hidden !important;
      }
      をCSSに付け足して試してみてください。
      なんででしょうかねえ。。。

      返信する

  6. サイトがとっても役に立ちました。ありがとうございます。 参考URL：http://www.webteq.site/archives/354
    http://www.nanairoweb.com/flexslider2

    返信する

  7. […] 解説サイト スライダーの使い方とオプション日本語訳。レスポンシブ、フリックスライドにも対応 | 焦点 […]

    返信する

  8. 初めまして。
    またこちらの記事が公開されてからお時間が経過しているところすみません。
    flexsliderを利用しているWPTutsバージョン: 2.0.0というテーマを利用しております。
    http://maki-maki.sakura.ne.jp/neko/
    こちらのトップページにスライドがあるのですが、画像は全て自動で切り抜かれてしまうため
    cssでは制御できません。
    縦長の写真も横長の写真も全体を表示したいのですが、どこで切り抜いた写真を生成するよう記述されているのか。。
    多分flexsliderのjqeryなのかな？と思ったりするのですが、まったくわかりません。

    どうかご教授頂けましたら幸いです。

    返信する

    • flexsliderのjqeryでは画像の切り抜きとかの作業は担わないと思います。
      CSSでマスク（部分的に隠すこと）するか、実画像をWordpress（実際はサーバーの画像アプリ）で切り抜きするのが通常です。
      サイトを拝見したところ、実際の画像が切られていますね。こんな感じで。
      http://maki-maki.sakura.ne.jp/neko/wp-content/uploads/2016/09/DSC4643-620×320.jpg
      本当はこんな感じで縦長なんですね？
      http://maki-maki.sakura.ne.jp/neko/2016/09/30/%E3%83%86%E3%82%B9%E3%83%884/

      WPTutsというテーマの設定か、Wordpressのメディアサイズの設定で解決できれば一番楽だと思いますが、そのような回避で済むのかこちらではわかりません。
      まず手順になりますが、以下のように解決を進めていくとよいと思います。
      １．どのように表示されるとベストなのかをまとめる。縦なら切られないで左右余白が出ても縦が全部入るように、とかとか。
      ２．それがテーマやWordpressで解決できるかどうか探す
      ３．ない場合はあきらめるか、テーマファイルのプログラムいじりに挑戦する。
      ４．プログラムいじりする場合は、flexsliderが記述されているあたりを探し、そこのかいてあるプログラムを追っていく、、、
      となっていくと思いますが、プログラムは慣れていないとかなり難しいかもしれません。楽しいんですがね。

      もし３．まで行って躓いたらテーマファイルを配布しているURLでも記載してみてください。

      ：追記です。
      たぶんですが、テーマファイルの中に「large」でthumbnailを設定しているところがあるかもしれません。それをfullに変えると解消すかも？とか思いました。あくまでご参考までにしてください。

      返信する

  9. […] すすめ flexsliderの使い方(デモ)とオプションの日本語訳。レスポンシブスライダー、フリックスライドにも対応 […]

    返信する

コメントを残す

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

CAPTCHA