• MENU●●●●
  • flexsliderをいろんなスタイルに変化させてみよう


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    flexslider スライドカスタム

    シリウスに、flexsliderを導入する手順はやや意味合いが違い
    戸惑われたかと思われますが、一度入れてしまえばカスタマイズの
    基本にさほどの面倒なく容易に進められます

     

    カスタマイズのわかりやすい手順は、まず、flexsliderサイトで
    DOMOを確認する
    http://www.woothemes.com/flexslider/

     

    もしくは
    最初にダウンロードしたflexsliderファイルを開くとやはり
    demoファイルがあるので開きます

     

    各スタイルのファイルがあります

     

    サイトから進む

     

    ファイルを開く

     

    どちらでもカスタマイズサイトへたどり着きます

     

    そして、そのDEMOスタイルの下に、jsコード HTMLコードが記載されています

     

     

    jsコードは作動スタイルを指すもので、以下の箇所を入れ替えれば
    DEMOスタイルに移行することになるのです

     

     

    参照
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="jquery.js"></script>
    <script src="jquery.flexslider.js"></script>
    <link rel="stylesheet" href="flexslider.css" type="text/css" />

     

    ここから下を入れ替えるのです
    <script type="text/javascript" charset="utf-8">
    $(window).load(function() {
    $('.flexslider').flexslider();
    });
    </script>

     

     

    htmlコードは、シリウスでしたら記事内の画像コードを配置する記述を
    指します

     

    スライドやフェーズする親画像の下に小さな子画像などがあるnaviの場合は

     

    画像コードが2段になりますのでコード事取り出し、記事内に張り付け
    読み込みする画像コードだけを入れ替えればよいのです

     

    この手順がカスタマイズを進めるうえで一番早いかと....

     

     

    多少の調整を加えたい方は以下をご確認ください

     

     

    要素確認

     

    animationLoop

     

    スライドを自動ループ作動させるかを指定
    trueの場合は自動ループを
    falseの場合はループ無
    デフォルトは trueとなっています

     

     

    animation スライド形
    fade かslide のどちらかを指定できます
    デフォルトは fade

     

     

    slideshow
    自動スライドか手動かの切り替え
    デフォルトは true

     

     

    animationSpeed
    アニメーション時の動くスピード
    数値が低くすると速くなり 高くすると遅くなります
    デフォルトは 600

     


     

     

    カスタム記載参考例

     

    <script type="text/javascript">
    $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide"
    });
    });
    </script>

     

    上記の記述はダウンロードファイルのDEMOファイルを開いて
    ソースを表示させればご理解いただけます

     


     

     

     

    こちらは公式サイトで記されている情報です

     

    以下の各スクリプトを入れ替えますと 作動の変化が確認できます

     

     

    Basic Slider

     

    // Can also be used with
    $(document).ready()
    $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide"
    });
    });

     

    画像導入コード

     

     


     

    Slider w/thumbnail controlNav pattern

     

    // Can also be used with
    $(document).ready()
    $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
    });
    });

     

     

    画像コード
    <!-- Place somewhere in the <body> of your page -->
    <div class="flexslider">
    <ul class="slides">
    <li data-thumb="slide1-thumb.jpg">
    <img src="slide1.jpg" />
    </li> <li data-thumb="slide2-thumb.jpg">
    <img src="slide2.jpg" />
    </li> <li data-thumb="slide3-thumb.jpg">
    <img src="slide3.jpg" />
    </li> <li data-thumb="slide4-thumb.jpg">
    <img src="slide4.jpg" />
    </li>
    </ul>
    </div>

     


     

    Basic Carousel

     

    $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5
    });
    });

     

    画像コード

    <div class="flexslider">
    <ul class="slides">
    <li> <img src="slide1.jpg" />
    </li>
    <li> <img src="slide2.jpg" />
    </li>
    <li> <img src="slide3.jpg" />
    </li>
    <li> <img src="slide4.jpg" />
    </li> <!-- items mirrored twice, total of 12 -->
    </ul>
    </div>

     

     

     

    画像が二つずつ移動なら枠サイズの半分の数値画像にします

     


     

     

    Carousel with dynamic min/max ranges

     

    (function() {
    // store the slider in a local variable var $window = $(window),
    flexslider;
    // tiny helper function to add breakpoints function getGridSize()
    { return (window.innerWidth <600>? 2 :
    (window.innerWidth < 900>? 3 : 4; } $(function()
    { SyntaxHighlighter.all(); }); $window.load(function()
    { $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: getGridSize(),
    // use function to pull in initial value
    maxItems: getGridSize()
    // use function to pull in initial value
    });
    });
    // check grid size on resize event $window.resize(function()
    { var gridSize = getGridSize();
    flexslider.vars.minItems = gridSize;
    flexslider.vars.maxItems = gridSize;
    });}
    ());

     

     

    画像コード

     

    <!-- Place somewhere in the <body> of your page -->
    <div class="flexslider">
    <ul class="slides">
    <li>
    <img src="slide1.jpg" />
    </li>
    <li>
    <img src="slide2.jpg" />
    </li>
    <li> <img src="slide3.jpg" />
    </li>
    <li> <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
    </ul>
    </div>

     

     

     

    好みのスタイルへたどり着くには何度も試行することになるでしょうけれど

     

    慣れるが大事です

     


     

     

    スポンサーリンク

     

     

    flexsliderをいろんなスタイルに変化させてみよう
    シリウスに適合するflexslider フレックススライダー設置方法
    シリウスカスタマイズ

     

     

     

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト