質問編集履歴

2 HTMLを追加いたしました。

hiroaki_sato score 34

2016/10/21 16:25  投稿

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

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

解決したい課題

例：

現在カルーセル表示が3になっております。

この状態ではカルーセル発動しないようにしたい。

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

【現在1〜3枚の場合】 ＜１＞＜２＞＜３＞

※カルーセル発動しない

【画像が増えた場合4枚目以上の場合】←＜1＞|＜2＞＜3＞＜4＞|←＜1＞

※左にカルーセルが動作し1〜4まで繰り返しスライドし続ける仕様

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

下記現状設定

```<section class="sec-ga-adv">

<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( $('.bx-ga-adv').length ) {

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

});

```

こんな感じで記載があります。

他にも必要なじょうほうございましたらお願いいたします。

JavaScript 37528 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 jQuery 13323 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加

1 コード部分

hiroaki_sato score 34

2016/10/21 16:15  投稿

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

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

解決したい課題

例：

現在カルーセル表示が3になっております。

この状態ではカルーセル発動しないようにしたい。

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

【現在1〜3枚の場合】 ＜１＞＜２＞＜３＞

※カルーセル発動しない

【画像が増えた場合4枚目以上の場合】←＜1＞|＜2＞＜3＞＜4＞|←＜1＞

※左にカルーセルが動作し1〜4まで繰り返しスライドし続ける仕様

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

下記現状設定

if( $('.bx-ga-adv').length ) {

```if( $('.bx-ga-adv').length ) {

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

});

```

こんな感じで記載があります。

他にも必要なじょうほうございましたらお願いいたします。

JavaScript 37528 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 jQuery 13323 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加