猫头鹰旋转木制在最后创造了额外的空间

Question

猫头鹰旋转木马在我滑到最后一个项目时在旋转木马的末端创建一个空的空间。我不确定这是否是默认行为，但对我来说看起来很奇怪。

在此过程中，我们可以看到我在旋转木马结束时谈论的额外空间。这是我到目前为止使用的代码：

我正在使用 autowidth = true，因为我将在不同的卡类型（不同的宽度）中使用旋转木马代码... 我的问题仅在我滑到最后一项时才会出现。空空间

Answer 1

请将项目添加到选项中，

项目：3（您想在屏幕上看到的项目数。）

 $('.owl-carousel').owlCarousel({

      autoWidth:true,
      loop:false,
      items:3,
      center:false,
      dots: false,
      merge:true,
      margin:10,
      lazyload:false,
      nav:true,
      navText: [
        '        <svg class="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a1{fill:#fff;stroke:#ec7f4a;stroke-width:4px;}.b1{stroke:#000;}.c1{stroke:none;}.d1{fill:none;}.e1{filter:url(#a1);}</style><filter id="a1" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-1527 -173)"><g class="e1" transform="matrix(1, 0, 0, 1, 1527, 173)"><g class="a1" transform="translate(9 6)"><circle class="c1" cx="22" cy="22" r="22"/><circle class="d1" cx="22" cy="22" r="20"/></g></g><path class="b1" d="M4,11H16.17L10.58,5.41,12,4l8,8-8,8-1.41-1.41L16.17,13H4Z" transform="translate(1570 213) rotate(180)"/></g></svg>',
        '        <svg class="hide-show animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a{fill:#fff;stroke:white;stroke-width:4px;}.b{stroke:#000;}.c{stroke:none;}.d{fill:none;}.e{filter:url(#a);}.animate .d,.a{animation: load-icon 1.5s linear .4s ;stroke-dasharray: 200;animation-direction: alternate-reverse;}@keyframes load-icon {to {stroke-dashoffset:200;stroke:#EC7F4A;}}</style><filter id="a" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-11 -173)"><g class="e" transform="matrix(1, 0, 0, 1, 11, 173)"><g class="a" transform="translate(9 6)"><circle class="c" cx="22" cy="22" r="22"/><circle class="d" cx="22" cy="22" r="20"/></g></g><path class="b" d="M20,11H7.83l5.59-5.59L12,4,4,12l8,8,1.41-1.41L7.83,13H20Z" transform="translate(54 213) rotate(-180)"/></g></svg>            '
      ]

  })

谢谢，

Answer 2

通过添加items，您可以控制显示项目。并基于您的屏幕宽度使用responsive，您可以控制显示项目。

以下示例我添加了这样的示例。希望这对您有用。

$('.owl-carousel').owlCarousel({		
  loop:false,
  center:false,
  dots: false,
  items:4,
  merge:true,
  margin:10,
  lazyload:false,   
  margin: 10,
  nav:true,
  navText: [
  '<svg class="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a1{fill:#fff;stroke:#ec7f4a;stroke-width:4px;}.b1{stroke:#000;}.c1{stroke:none;}.d1{fill:none;}.e1{filter:url(#a1);}</style><filter id="a1" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-1527 -173)"><g class="e1" transform="matrix(1, 0, 0, 1, 1527, 173)"><g class="a1" transform="translate(9 6)"><circle class="c1" cx="22" cy="22" r="22"/><circle class="d1" cx="22" cy="22" r="20"/></g></g><path class="b1" d="M4,11H16.17L10.58,5.41,12,4l8,8-8,8-1.41-1.41L16.17,13H4Z" transform="translate(1570 213) rotate(180)"/></g></svg>',
  '<svg class="hide-show animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a{fill:#fff;stroke:white;stroke-width:4px;}.b{stroke:#000;}.c{stroke:none;}.d{fill:none;}.e{filter:url(#a);}.animate .d,.a{animation: load-icon 1.5s linear .4s ;stroke-dasharray: 200;animation-direction: alternate-reverse;}@keyframes load-icon {to {stroke-dashoffset:200;stroke:#EC7F4A;}}</style><filter id="a" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-11 -173)"><g class="e" transform="matrix(1, 0, 0, 1, 11, 173)"><g class="a" transform="translate(9 6)"><circle class="c" cx="22" cy="22" r="22"/><circle class="d" cx="22" cy="22" r="20"/></g></g><path class="b" d="M20,11H7.83l5.59-5.59L12,4,4,12l8,8,1.41-1.41L7.83,13H20Z" transform="translate(54 213) rotate(-180)"/></g></svg>            '
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
    items: 2
    },
    767: {
    items: 3
    },
    1024: {
    items: 4
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<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 class="carousel-wrap">
    <div class="owl-carousel">
        <div class="item"><img src="http://placehold.it/150x150"></div>
        <div class="item"><img src="http://placehold.it/150x150"></div>
        <div class="item"><img src="http://placehold.it/150x150"></div>
        <div class="item"><img src="http://placehold.it/150x150"></div>
        <div class="item"><img src="http://placehold.it/150x150"></div>
        <div class="item"><img src="http://placehold.it/150x150"></div>
    </div>
</div>