質問編集履歴

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

hiroaki_sato

hiroaki_sato score 34

2016/10/21 16:25  投稿

bxsliderを使用したカルーセルについて(カルーセルを任意の枚数以上から動作開始させたい)
bxsliderを使用してカルーセルを作成しています。
解決したい課題
例:
現在カルーセル表示が3になっております。
この状態ではカルーセル発動しないようにしたい。
それに合わせて4枚目以降が増えた場合はカルーセル発動させたい。
【現在1〜3枚の場合】 <1><2><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ブラウザのほとんどに搭載されています。

  • jQuery

    13323 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 コード部分

hiroaki_sato

hiroaki_sato score 34

2016/10/21 16:15  投稿

bxsliderを使用したカルーセルについて(カルーセルを任意の枚数以上から動作開始させたい)
bxsliderを使用してカルーセルを作成しています。
解決したい課題
例:
現在カルーセル表示が3になっております。
この状態ではカルーセル発動しないようにしたい。
それに合わせて4枚目以降が増えた場合はカルーセル発動させたい。
【現在1〜3枚の場合】 <1><2><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ブラウザのほとんどに搭載されています。

  • jQuery

    13323 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る