公開日:2014年7月10日javascriptjQueryFlexSlider2今回紹介するjQueryプラグインもまた、有名どころですが「FlexSlider2」です。豊富なオプションとIE7まで対応しているので重宝します。ほんとはIE7なんざ絶対にもう対応したくないけど!用意するものは3つまずは公式ページからファイル一式をダウンロードします。入っていますが最低限必要なファイルは下記になります。src="jquery.flexslider.js"></script>基本的な書き方htmlのマークアップはこんな感じになります。普通にリストを作れば良いので簡単ですねー。※cssも使っているため、class名は変えない方が良いかもです。/></li></ul></div>こちらはJSで最低限必要な記述になります(オプションを加えない書き方)。プラグインの記述自体は1行で済むのでJSが苦手な人も安心です。$(function(){//class="flexslider"をスライダーにするよ!って記述。$('.flexslider').flexslider();});ちなみにli要素をスライドするので中身にテキスト・画像など何を入れても大丈夫。情報を入れ込んだボックスをスライドさせることができます。たくさんのオプションオプションの書き方はこんな感じです。それぞれのオプションは「,」で繋いでいきます。最後のオプションに「,」はいらないので気をつけましょう。//end:オプションでは最後までスライドしたときに発生する処理を追加できる。}});よく使いそうなオプションをいくつか書いておきます。・・・“fade”か”slide”を選択できる。・・・スライドする感覚の設定。ナビゲーションを表示非表示もっと詳しく知りたい方は、公式もしくは、この記事を書くときにも参考にさせていただいたオンズさんのブログもおすすめです。CSSをいじればいろいろ調整できる実際に制作していると、デフォルトのままのデザインで使うことってあまりない気がします。そこでflexslider.cssの中身を見てみると、「.flex-next」への指定で次へボタンの装飾を行っているのが割と簡単にわかります。このプラグインはボタンの表示非表示、ちょっとしたアニメーションなんかもclassの付け替えで行っているようなので、こちらでそうした調整も出来ます。そんなに長いファイルでもないので、CSSの出来る方ならそんなに苦労はしないでしょう。脳内賑やか系の主人公が送る特別じゃない愛すべき日常。ファンタジーもありません。ドラマチックより食い気優先。それでも好きなものが沢山ある三歩(さんぽ)は、普通の日々を今日も楽しく生きています。不安や不満やヘイトに目を向けるより、目の前の好きなものを味わう人生を送ろうと思える。そんな素敵な一冊です。使い方PHP5系からPHP7へのバージョンアップすると動かなくなるコードの修正について3月のフィリピンはセブ島へ旅行してきました!【準備や費用まとめ】モーダルで閲覧できるギャラリーを実装するのにfancyBox3が便利過ぎる。家族との時間を大切にする事に貪欲です。