2016-11-19 88 views
0

我在我的頁面上有20個問題。所有這些問題都在問題div中。我想分頁這個問題。我想用next和prev按鈕有5頁。每頁有5個問題。所以我決定使用Qwl-Carousel庫。我的div系統如下:使用貓頭鷹傳送帶圖書館頁面問題在頁面上

<div class="questions"> 
    <div class="question-page"></div> 
    <div class="question-page"></div> 
    <div class="question-page"></div> 
    <div class="question-page"></div> 
    <div class="submit-page"></div> 
    </div> 
/*each question-page has*/ 
<div class="question-page"> 
    <div class="col-md-12"> 
     <h3>Page-1 Question-1</h3> 
     <ul class="options"></ul> 
     <h3>Page-1 Question-2</h3> 
     <ul class="options"></ul> 
     <h3>Page-1 Question-3</h3> 
     <ul class="options"></ul> 
     <h3>Page-1 Question-4</h3> 
     <ul class="options"></ul> 
     <h3>Page-1 Question-5</h3> 
     <ul class="options"></ul> 
    </div> 
</div> 

通常情況下,我可以在一個頁面中顯示所有問題。但是當我想要頁面這樣的問題,如下所示:

$(".questions").owlCarousel({ 
    }); 

在此代碼後,所有問題都是隱形的。我沒有使用任何CSS代碼。只有我添加庫源代碼。我能做些什麼來解決這個問題?我沒有找到好的教程。所有教程都集成到頁面圖像中。但我想在不同的div塊中尋找問題。我可以使用其他方式進行分頁。例如使用jquery,bootstrap。

謝謝你的建議...

回答

0

你的旋轉木馬無法啓動,因爲你的選擇是$('#questions')這將目標與IDquestions一個div,而你的旋轉木馬容器具有questions。任一

  • 變化<div class="questions"><div id="questions">,或
  • 改變轉盤選擇器$('.questions')

爲了顯示每滑動5個項目,使用items屬性:

$(".questions").owlCarousel({ 
    items:5 
}); 

對於任何其他選項檢查OC Options API

作爲一個側面說明,貓頭鷹可以很好地使用內嵌的內嵌內容。原則上,您使用圖像找到的任何示例也適用於內聯內容(<div> s)。

相關問題