メシのタネ

Webプログラミング 備忘録

  • AWS移行でコケ中

    現在このWebサイトが稼働している、このサーバーのMySQLをマスターとし、AWS上のRDSをスレーブとして、データ移行をしようと思ったが、バイナリロギングの取得が上手くいかない。多分の手順VPSのDBでスレーブ用のユーザ作成バイナリロギングを行うスレーブ側RDSにマスターのDUM[...]

    続きを読む
  • AWS ソリューションアーキテクト アソシエイトに合格しました。

    実は、今日までIT無資格でした。ええ歳だし、そろそろなんか資格取っておくかーと考えだしたので、取って嬉しい資格を取ろうと思ってたところ、AWSの資格あったなーと思って、調べてみたら、みんな14日で受かる!とか言ってるので、じゃあというこで、試験日14日後とかにして、試験の予約入れたのが地獄の始まり[...]

    続きを読む
  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む

【jQuery】Flexsliderのパラメータ設定

PPW_memori
私はアニメーションが得意じゃないので、
こういう動かす系やる時はライブラリ探して設置します。
このテーマと同じ会社がたまたまスライダー出してたので
今回それを使う事にしました。

IE8を完全に捨ててきてるので、
お客さんに確認取った方が良いと思いますが、
動きも綺麗だし設置も簡単なので個人的にオススメです。

設置方法 HTML部分

必要なファイルはここから取れます
class flexsliderの中にslidesっていうul作ってその中にlist入れていきます。
この後にjsの設定をしていきます。

</p>
<p>&lt;div class=&quot;flexslider&quot;&gt;<br />
  &lt;ul class=&quot;slides&quot;&gt;<br />
    &lt;li&gt;<br />
      &lt;img src=&quot;slide1.jpg&quot; /&gt;<br />
    &lt;/li&gt;<br />
    &lt;li&gt;<br />
      &lt;img src=&quot;slide2.jpg&quot; /&gt;<br />
    &lt;/li&gt;<br />
    &lt;li&gt;<br />
      &lt;img src=&quot;slide3.jpg&quot; /&gt;<br />
    &lt;/li&gt;<br />
    &lt;li&gt;<br />
      &lt;img src=&quot;slide4.jpg&quot; /&gt;<br />
    &lt;/li&gt;<br />
  &lt;/ul&gt;<br />
&lt;/div&gt;</p>
<p>

設置方法JS部分

公式ページだとjQueryは下のほうで読み込まれてるので、
jsの読み込みはフッター部の後くらいに入れた方がいいかもです。
画面が読み込まれたときに.loadメソッドの中に関数入れて
flexsliderの要素掴んで.flexsliderメソッドを呼んでから、
オブジェクト作ってパラメータを設定していきます。

<br />
    $(window).load(function(){<br />
      $('.flexslider').flexslider({<br />
        animation: &quot;fade&quot;,<br />
        slideshow: true,<br />
        slideshowSpeed: 5000,<br />
        animationSpeed: 600,<br />
        animationLoop: true,<br />
        start: function(slider){<br />
          slider.vars.animationSpeed=3000;<br />
          console.log(slider.vars.animationSpeed);<br />
          $('body').removeClass('loading');<br />
        }</p>
<p>      });<br />
    });<br />

こんな感じになります。

パラメータの説明

このままかかれても意味不明なので、
簡単にコメントの中に説明を書いていきます。

<br />
        animation: &quot;fade&quot;, //アニメーションのタイプを選択します。他にはslideがあります。<br />
        slideshowSpeed: 5000,  //スライドするスピードを1000msで設定します。1000で1sです。<br />
        animationSpeed: 600,  //アニメーションのスピードを指定します。<br />
        animationLoop: true, //スライドをループさせるか設定します。<br />
        start: function(slider){ スタートが終わった後に実行するコールバック関数<br />
          slider.vars.animationSpeed=3000; //アニメーションのスピードを再設定しています。<br />
          $('body').removeClass('loading');<br />
        }</p>
<p>

こんな感じです。

もちろんこれ以外にも沢山設定値があって、
それら全部をgithubでまとめておいてくれてるので、
そちらも見てみると良いと思います。

特にこのタイミングじゃなくても、コールバック関数は
色んなタイミングで設定されているので、参考にする価値があります。

Flexslider Options

関連記事

コメントをお待ちしております