在 owl carousel 中的项目之间添加空间答案

【问题标题】：Adding space between items in an owl carousel在 owl carousel 中的项目之间添加空间
【发布时间】：2021-08-16 13:35:16
【问题描述】：

如何在 owl carousel 中的项目之间添加空间？我尝试过使用stagePadding，但它在第一项左侧增加了空间。保证金也不起作用。你能帮帮我吗？

HTML

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
  navigation : true
  });
});

#owl-demo .item{
  padding: 30px 0px;
  margin: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/WZwr2a_lFWY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/dLymsYC7Kmo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/M46FRJsB0Qw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/6eEZ7DJMzuk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/nRYCLOTRAK4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/eDEFolvLn0A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/nnVjsos40qk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/QqsvrV1_XEA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/G8GaQdW2wHc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/0nPlIi685DU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
                    
</div>

【问题讨论】：

标签： javascript html jquery css owl-carousel

【解决方案1】：

只需在代码中添加：autoWidth:true

    $(document).ready(function() {
     
      $("#owl-demo").owlCarousel({
        navigation : true,
        autoWidth:true,
      });
     
    });

https://jsfiddle.net/pohnvm01/

【讨论】：

谢谢！！这有效，但是猫头鹰轮播中最后一项的右侧有额外的空间。我应该如何解决这个问题？
可能是添加循环：true

【解决方案2】：

应该这样做。见我的 jsfiddle：https://jsfiddle.net/bogatyr77/1v9x0g63/3/

<script type = "text/javascript">
        $(document).ready(function() {
         
          $("#owl-demo").owlCarousel({
            navigation : true,
            margin: 10 // for example

          });
         
        });
    </script>

【讨论】：

我用边距试过了，但没有用:(