显示两个项目的旋转木马

时间：2017-08-04 09:28:26

标签： javascript jquery css carousel

我想创建显示两个项目的轮播。 请查看此示例：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

中一样

4 个答案:

答案 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>

答案 1 :(得分：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 :(得分：0)

试试这个

利用猫头鹰轮播2，在.itemC div中包裹.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,
  });   
    });

样式相应并根据需要更改自动播放持续时间

Codepen Link

答案 3 :(得分：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>

相关问题
最新问题