bxsliderを使用したカルーセルについて（カルーセルを任意の枚数以上から動作開始させたい）

Question

bxsliderを使用してカルーセルを作成しています。

解決したい課題

例：
現在カルーセル表示が3になっております。
この状態ではカルーセル発動しないようにしたい。

それに合わせて4枚目以降が増えた場合はカルーセル発動させたい。

【現在1〜3枚の場合】 ＜１＞＜２＞＜３＞
※カルーセル発動しない

【画像が増えた場合4枚目以上の場合】←＜1＞|＜2＞＜3＞＜4＞|←＜1＞
※左にカルーセルが動作し1〜4まで繰り返しスライドし続ける仕様

上記のような事をするのがイメージです。

下記現状設定

	<div class="sec-inner wrapper">
		<div class="mod-ga-adv">
			<ul class="bx-ga-adv">
				<li class="ls">
					<div class="it">
						<a href="#" class="trans">
						<img src="img01.jpg" alt="hoge" />
						</a>
					</div>
				</li>
				<li class="ls">
					<div class="it">
						<a href="#" target="_blank" target=”_blank" class="trans">
						<img src="img02.jpg" alt="hoge" />
						</a>
					</div>
				</li>
				<li class="ls">
					<div class="it">
						<a href="#" class="trans">
						<img src="img03.jpg" alt="hoge" />
						</a>
					</div>
				</li>

			</ul>
		</div>
	</div>
</section>

			if( $(window).width() > 481 ) {
				var bx_ga_adv = $('.bx-ga-adv').bxSlider({
					auto: true,
					speed: 1000,
					pause: 3500,
					controls: true,
					pager: false,
					slideWidth: 296,
				    minSlides: 3,
				    maxSlides: 5,
				    slideMargin: 3,
				    moveSlides: 1
				});
			}
			else {
				var bx_ga_adv = $('.bx-ga-adv').bxSlider({
					auto: true,
					speed: 1000,
					pause: 3500,
					controls: true,
					pager: false
				});

こんな感じで記載があります。
他にも必要なじょうほうございましたらお願いいたします。

Comments

[kei344]

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[hiroaki_sato]

ありがとうございます！こんな機能があったのですね。丁寧にご連絡いただきありがとうございました。

Answer 1

すみません、私が解決したい課題を良く理解出来ていないだけなのかもしれないのですが、if文で処理を分岐させるのはいかがでしょうか。

//ID指定がある場合は下記で子要素を取得
var imgCount = document.getElementById("hoge").childElementCount;

//imgCountをif文で判定
if(imgCount < 4){
	//カルーセルでない処理
} else {

	if( $(window).width() > 481 ) { 
	var bx_ga_adv = $('.bx-ga-adv').bxSlider({ 
	auto: true, 
	speed: 1000, 
	pause: 3500, 
	controls: true, 
	pager: false, 
	slideWidth: 296, 
	minSlides: imgCount, //imgCountもしくは任意数を指定
	maxSlides: imgCount, //imgCountもしくは任意数を指定
	slideMargin: 3, 
	moveSlides: 1 
	}); 
	} 
	else { 
	var bx_ga_adv = $('.bx-ga-adv').bxSlider({ 
	auto: true, 
	speed: 1000, 
	pause: 3500, 
	controls: true, 
	pager: false 
	});

}

HTMLソースが無いのでなんとも言えないですが一例として。

Comments

[hiroaki_sato]

ご回答誠に感謝いたします。ありがとうございます！頂いた内容で確認しましたところエラーが起きてしまいました。
カルーセルが機能しない現象が起きました。

[hiroaki_sato]

内容といたしましては、
カルーセルの画像枚数が4枚以上になった場合から
カルーセルを発動させたいといった内容です。

現状デザイン的にも3枚は全て表に見えている状態なので
カルーセルで動かす必要性が無いためです。

[nobinobi]

ご説明ありがとうございます。
では4枚以上の時のみbxslider(のカルーセルスクリプト)が発動すれば良いのですね。

エラーを教えて頂けますか？

minSlides: imgCount, //imgCountもしくは任意数を指定
maxSlides: imgCount, //imgCountもしくは任意数を指定

エラーが発生しているのは上記あたりでしょうか？

[nobinobi]

すみません。
bxsliderを使ってる時点で共通クラスがあるのをわすれていました。
下記のように要素数を取得する場所を変更してみてください。

【変更前】
var imgCount = document.getElementById("hoge").childElementCount;
【変更後】
var imgCount = document.getElementsByClassName("bx-ga-adv").length;

一応、私の手元で動いたコードを載せておきます。
長いですが、ご了承下さい。

$(document).ready(function(){
Mybxslide();
});
function Mybxslide(){
//var ulObj = document.getElementById("hoge").children;
var imgCount = document.getElementsByClassName("bx-ga-adv").length;
console.log(imgCount);

//imgCountをif文で判定
if(imgCount < 4){
//カルーセルでない処理
} else {
if( $(window).width() > 481 ) {
var bx_ga_adv = $('.bx-ga-adv').bxSlider({
auto: true,
speed: 1000,
pause: 3500,
controls: true,
pager: false,
slideWidth: 296,
minSlides: imgCount,
maxSlides: imgCount,
slideMargin: 3,
moveSlides: 1
});
}else {
var bx_ga_adv = $('.bx-ga-adv').bxSlider({
auto: true,
speed: 1000,
pause: 3500,
controls: true,
pager: false
});
}

//４枚以上のときのみ発動
$('.bxslider').bxSlider();

}
}

あと、どなたかできればコメント欄でコード表記にする方法を知っていたら教えて頂きたく思います。

[hiroaki_sato]

ありがとうございました！！
解決いたしました。

複数のjavascriptがはいっていたのでそのあたりも衝突して
上手くいかなかったようです。
上記のコードとその部分を修正しましたら問題ございませんでした。

親切にありがとうございました！