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

 

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

 

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

 

ですが、ウェブ上で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）を導入する方法

 

スポンサー広告

 

---

 

ページで呼び出す画像コード、当サイトの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 {
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