1. 首頁
  2. 問答
  3. 顯示兩個項目的旋轉木馬

顯示兩個項目的旋轉木馬

2017-08-04 64 views
0

我想創建顯示兩個項目的旋轉木馬。 檢查這個例子：https://codepen.io/samugleztrejo/pen/VjBJkg顯示兩個項目的旋轉木馬

我不希望它是多塊，每塊有兩個項目

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

我想列出一個塊中的所有項目。

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

和顯示只有兩個就像在example mentioned above

來源

2017-08-04 lahmer.bechir

+0

兩個項目顯示手段？ – anu

+0

是的，我想要顯示兩個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>

包裹.itemC div的JS

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

風格因此而改變自動播放根據需要持續時間

個

Codepen Link

來源

2017-08-04 09:50:04

+0

謝謝,,就是它 我找到了我想要的鏈接 –

+0

雅，給我一分鐘..我會添加更新的代碼 –

+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

但我只想顯示兩個項目 –

+0

您需要** 1個傳送帶兩個項目**或** 2個傳送帶兩個項目** – Shiladitya

+0

一個傳送帶包含多個項目，並且僅顯示兩個'物品' –

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>

這是你想要的嗎？

來源

2017-08-04 09:46:44 anu

+0

它會包含多個項目（超過兩個項目）。我只想顯示兩個 –

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

相關問題

 相關問題