• MENU●●●●
  • li要素で作動させるBXスライダー(BxSlider)


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

    スポンサー広告

    関連記事


    li要素で作動するBXスライダー(BxSlider)

    シリウスで作動するBXスライダー(BxSlider)の構築要素は二種類が
    ございまして、何かしらの事情でdiv要素が動かない.反映されない場合、
    li要素で指定することができます

     

    div要素 li要素てなに?...と思われる方もおりますね

     

    記事内で画像を読み込むためのid指定をする囲み要素のことをいってます

     

    ですが、ウェブ上でBXスライダーの取り付けご案内サイトを複数拝見すると
    div要素、もしくはli要素で記載されている例が見られますね
    なぜでしょう...でも、あまり深く考えると頭痛くなるので簡単に...

     

    当サイトの親ページでは、div要素 <div>を使用してスライドする画像を
    囲んでいます...以下記載コード

     

    <div id="slider">
    <div><img src="http://サイトURL/img/1airako4.jpg"></div>
    </div>

     

     

     

    もう一つの li要素 <li>で画像を囲んだ記載

     

    <ul class="slider">
    <li><img src="http://サイトURL/img/img/1658.png"></li>
    </ul>

     

    ネット上でスライダー画像の導入解説など拝見しますと、圧倒的に
    多いのが、li要素を使用しての情報でBXスライダーでも、どちらかを
    選択して反映させることができるのです

     

    div要素で指定したが反映されない...その逆もしかり

     

    要因は、以前に導入した scriptが原因とかもございま⒮ね

     

    当サイトは、div要素、li要素どちらでも反映されない状況
    デモ、他のサイトでは動くんですね~

     

    その時の状況によりどちらを使用するかは環境によりご選択ください

     

    当サイトのメインカテゴリーでは、div要素を使用の解説がございますので、
    こちらは、li要素で構築する手順で進めますが、scriptは同じなので

     

    記載の違いについてご確認し、進めてください

     

     

    意味が通じない場合は、メインサイトをご参照してください
    シリウスにスライダー(BxSlider)を導入する方法

     


    スポンサー広告
    日々の生活にhappyをプラスする|ハピタス

     


     

    ページで呼び出す画像コード、当サイトのURLで記載してます例

     

    <ul class="slider">
    <li><img src="http://www.affiliateno1.com/img/1pontei.jpg"style="width:550px;height:300px;" alt="" /></li>
    <li><img src="http://www.affiliateno1.com/img/1ponti2.jpg"style="width:550px;height:300px;" alt="" /></li>
    <li><img src="http://www.affiliateno1.com/img/clipimage_44.jpg"style="width:550px;height:300px;" alt="" /></li>
    </ul>

     

     

    画像コードは,上記例に限らず以下の記載でも動きます
    参照
    <li><img src="<% pageDepth %>img/1632.png" style="width:580px; height:400px;" alt="" /></li>

     

     

    </body>上に置く記述コード例

     

    標準の横移動する作動を指定する記述

     

    <script src="http://www.affiliateno1.com/jquery-2.1.1.min.js"></script>
    <script src="jquery.bxslider-v4/jquery.bxslider.min.js" type="text/javascript"></script>
    <script src="http://www.affiliateno1.com/jquery.bxslider.min.js"></script>
    <link href="http://www.affiliateno1.com/jquery.bxslider.css" rel="stylesheet" />
    <script type="text/javascript">
    $(document).ready(function(){
    $('.slider').bxSlider();
    });
    </script>

     

     

     

    www.affiliateno1.com、サイトURLはあなたのサイトのURL

     

     

    ここが、div要素の場合と記号が異なるところ
    $('.slider').bxSlider();

     

    よく見てください
    div要素の場合、#が違うのです
    $('#slider').bxSlider();

     

    この記載違いを理解しないと、ネット上で公開されている記述コードを
    用いても、不作動 動かない 反映されないとなります

     

     

    若干の記載違いですが、一つの記号ミスでも動かないのが、
    BXスライダーなんです

     


     

    備考

     

    li 要素で丸い点が表示されたなら...ですが、シリウスに限り
    スタイルシート記載の以下記載  /* 基本レイアウト */の上の上が
    表示させています

     

    余りというか、ほとんど使わいなら、liを削除すれば表示されません
    もしくは、削除に躊躇するならテンプレートの画像ファイルより..
    li画像ファイル削除でも対応可能..
    当サイトでは、記載も画像ファイルも削除しています
    て、いうよりこれあるとあちこちであられ結構お邪魔な点々なので削除した次第
    (他スライダー、外部導入ナビなどに現れた例あり)

     

    li {
    display: list-item;
    margin: 0;
    }

     

    ul li {
    list-style-type: none;
    list-style-image: url(./img/li.gif);
    }

     

     

    p {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }

     

    /* 基本レイアウト */

     

     

    終わります

     

     

     

    スポンサーリンク

     

     

     

    ページトップ
    li要素で作動させるBXスライダー(BxSlider)
    シリウスBxSlider|BXスライダー完全取り付け詳細設定方法
    シリウスカスタマイズTOP

    li要素で作動させるBXスライダー(BxSlider)関連解説
    BXスライダー(BxSlider)がiPhoneで動かない?
    シリウスにjQueryBXスライダー(BxSlider)を搭載後 、PCやipadでは正常な作動の確認できるのですがiphon画面では、画像が縦横に並ぶだけで動かないという症状が見られます
    BxSliderスライダーにサムネイルギャラリーを設定する方法
    シリウスにBxSliderスライダーを取り付けたなら、次はサムネイルギャラリーを設定する方法です。サイトを訪れた読者に画像演出コンテンツの理解を伝えるカスタマイズかも?
    シリウスBXスライダースマホモバイル対応のカスタマイズ
    シリウスで作成のパソコン表示サイトに加えてスマホモバイル画面でも正常に反映されるjQueryBXスライダー(BxSlider)の指定を追加するカスタマイズのご案内です

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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