1. ホーム
  2. 質問と答え
  3. 2つのアイテムが表示されたカルーセル

2つのアイテムが表示されたカルーセル

2017-08-04 5 views
0

2つのアイテムが表示されたカルーセルを作成します。二つのアイテム2つのアイテムが表示されたカルーセル

<div> 
    <item> 
    <item> 
</div> 
<div> 
    <item> 
    <item> 
</div>

私は1つのブロック内のすべての項目をリストしたいと私はそれが複数のブロックになりたくないhttps://codepen.io/samugleztrejo/pen/VjBJkg

各ブロック： この例をチェックしてください。ここでexample mentioned above

出典

2017-08-04 lahmer.bechir

+0

の2つの項目が表示された手段を？ – anu

+0

はい、私は2つのiitemsを表示したい –

答えて

0

この

は、フクロウカルーセル2を使用することにより.itemのdiv

HTML

<div id="owl-example1" class="owl-carousel"> 
     <div class="item"> 
      <div class="itemC">Your Content</div> 
     </div> 
     <div class="item"> 
      <div class="itemC">Your Content</div> 
     </div> 
     <div class="item"> 
      <div class="itemC">Your Content</div> 
     </div> 
     <div class="item"> 
      <div class="itemC">Your Content</div> 
     </div> 
     <div class="item"> 
      <div class="itemC">Your Content</div> 
     </div> 
     <div class="item"> 
      <div class="itemC">Your Content</div> 
     </div> 
     <div class="item"> 
      <div class="itemC">Your Content</div> 
     </div> 
     </div>

JS

$(document).ready(function() { 
    $("#owl-example1").owlCarousel({ 
    margin:10, 
    items:2, 
    autoplay:true, 
    autoplayTimeout:1000, 
    }); 
    });

スタイルで.itemC divをラップし、自動再生を変更してください必要に応じて継続時間

の

Codepen Link

出典

2017-08-04 09:50:04

+0

ありがとう、それはそれです 私はそのリンクにしたいものが見つかりました –

+0

ya、私に分を与える..私は更新されたコードを追加します –

+0

更新されたコードを確認します –

0

にあなたが解決策https://codepen.io/Shiladitya/pen/PKbjMK

$(document).ready(function() { 
 
    
 
    $("#owl-example1").owlCarousel({ 
 
    items:2, 
 
    autoWidth:true, 
 
    autoplay:false 
 
    }); 
 
}); 
 

.itemC{ 
 
    background:#ccc; 
 
    height: 100px; 
 
    width:90%; 
 
    margin:0 auto; 
 
    text-align:center; 
 
    } 
 

 
#owl-example1{ 
 
    .itemC{ 
 
    background:tomato; 
 
    } 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css" rel="stylesheet"/> 
 
<link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script> 
 
<div class="panel-body"> 
 
    <div id="owl-example1" class="owl-carousel"> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    </div> 
 
</div>

出典

2017-08-04 09:33:04 Shiladitya

+0

しかし、私はちょうど2つのアイテムを表示したいです –

+0

あなたは2つのアイテム**または** 2カルーセルと2アイテム** ** 1カルーセルが必要です** – Shiladitya

+0

複数カルーセルは、 2つの 'items' –

0 

$(document).ready(function() { 
 

 
    $("#owl-example1").owlCarousel(); 
 
    $("#owl-example2").owlCarousel(); 
 
    $("#owl-example3").owlCarousel(); 
 

 

 
}); 
 
/* 
 
http://stackoverflow.com/questions/36077159/owl-carousel-2-inside-bootstrap-accordion-working-only-on-window-resize*/
.itemC { 
 
    background: #ccc; 
 
    height: 100px; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
#owl-example1 { 
 
    .itemC { 
 
    background: tomato; 
 
    } 
 
} 
 

 
#owl-example3 { 
 
    .itemC { 
 
    background: tan; 
 
    } 
 
} 
 

 
#owl-example2 { 
 
    .itemC { 
 
    background: #ff8800; 
 
    } 
 
}
<link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css" rel="stylesheet" /> 
 
<link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingOne"> 
 
     <h4 class="panel-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="panel-body"> 
 
     <div id="owl-example1" class="owl-carousel"> 
 
      <div> 
 
      <div class="itemC"> Your Content </div> 
 
      </div> 
 
      <div> 
 
      <div class="itemC"> Your Content </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>
で行くちょうど2つだけのよう 

<div> 
    <item></items> 
    <item></items> 
    <item></items> 
    <item></items> 
</div>

と表示10

これは必要なものですか？

出典

2017-08-04 09:46:44 anu

+0

には複数の項目が含まれています（2つ以上の項目）。私はちょうど2つを表示したい –

0 

$(document).ready(function() { 
 
    
 
    $("#owl-example1").owlCarousel({ 
 
    loop:true, 
 
    items:2, 
 
    margin:10, 
 
    responsiveClass:true, 
 
    responsive:{ 
 
     0:{ 
 
      items:2, 
 
      nav:true 
 
     }, 
 
     600:{ 
 
      items:2, 
 
      nav:true 
 
     }, 
 
     1000:{ 
 
      items:2, 
 
      nav:true, 
 
      loop:true 
 
     } 
 
    } 
 
}); 
 
    $("#owl-example2").owlCarousel({ 
 
    loop:true, 
 
    margin:10, 
 
    responsiveClass:true, 
 
    responsive:{ 
 
     0:{ 
 
      items:2, 
 
      nav:true 
 
     }, 
 
     600:{ 
 
      items:2, 
 
      nav:true 
 
     }, 
 
     1000:{ 
 
      items:2, 
 
      nav:true, 
 
      loop:true 
 
     } 
 
    } 
 
}); 
 
    $("#owl-example3").owlCarousel({ 
 
    loop:true, 
 
    margin:10, 
 
    responsiveClass:true, 
 
    responsive:{ 
 
     0:{ 
 
      items:2, 
 
      nav:true 
 
     }, 
 
     600:{ 
 
      items:2, 
 
      nav:true 
 
     }, 
 
     1000:{ 
 
      items:2, 
 
      nav:true, 
 
      loop:true 
 
     } 
 
    } 
 
}); 
 
    
 
    
 
}); 
 
/* 
 
http://stackoverflow.com/questions/36077159/owl-carousel-2-inside-bootstrap-accordion-working-only-on-window-resize*/
.itemC{ 
 
    background:#ccc; 
 
    height: 100px; 
 
    width:90%; 
 
    margin:0 auto; 
 
    text-align:center; 
 
    } 
 

 
#owl-example1 .itemC{ 
 
    background:tomato; 
 
} 
 
#owl-example3 .itemC{ 
 
    background:tan; 
 
} 
 
#owl-example2 .itemC{ 
 
    background:#ff8800; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css" rel="stylesheet"/> 
 
<link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css" rel="stylesheet"/> 
 

 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script> 
 

 

 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingOne"> 
 
     <h4 class="panel-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="panel-body"> 
 
<div id="owl-example1" class="owl-carousel"> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 

 
</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingTwo"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="panel-body"> 
 
<div id="owl-example2" class="owl-carousel"> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 

 
</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingThree"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
      Collapsible Group Item #3 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
     <div class="panel-body"> 
 
<div id="owl-example3" class="owl-carousel"> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 
    <div><div class="itemC"> Your Content </div></div> 
 

 
</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-04 12:03:54 Dhaarani

関連する問題

 関連する問題