javascript - 显示两个元素的旋转木马

Question

我想创建显示两个元素的轮播。检查此示例:https://codepen.io/samugleztrejo/pen/VjBJkg

我不希望它是多个 block 并且每个 block 有两个元素

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

我想在一个 block 中列出所有元素。

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

并且只显示两个，就像在 example mentioned above 中一样

Answer 1

试试这个

利用 Owl carousel 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