Owl-Carousel Libraryを使用してページに関する質問ページへ

Question

私のページには20の質問があります。これらすべての質問は質問のdivにあります。私はこの質問をページしたい。私は次と前のボタンで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> 

通常、私はすべての質問を1ページに表示できます。しかし、私はこのような質問を次のようにページしたいとき：

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

このコードの後、すべての質問は見えません。私はどのCSSコードも使用しませんでした。私はライブラリのソースコードを追加するだけです。この質問には何ができるのですか？私は良いチュートリアルを見つけることができませんでした。すべてのチュートリアルはペ​​ージイメージに統合されています。しかし、私は別のdivブロックで質問をページしたい。このページングを他の方法で行うことはできますか？jQuery、ブートストラップを使用しています。あなたのアドバイスのための

おかげで...

Answer 1

あなたのカルーセルコンテナがquestionsとしてを持っていながら、あなたのセレクタは、IDquestionsの持つdiv要素を標的とする$('#questions')あるので、あなたのカルーセルは起動しません。クラス。 <div id="questions">にいずれか

• 変化<div class="questions">、又は$('.questions')から
• 変化カルーセルセレクタ。 OC Options APIを確認し、他のオプションについて

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

  ：スライド当たり5つの項目を表示itemsプロパティを使用するために

。

サイドノートとして、Owlはインラインコンテンツをすぐに使用することができます。原則として、イメージを使用しているすべての例は、インラインコンテンツ（<div>）でも動作します。