猫头鹰旋转木马在末端创造了额外的空间

时间：2019-03-18 08:48:19

标签： css angular owl-carousel

当我滑动到最后一个项目时，猫头鹰轮播会在轮播的末尾创建一个空白区域。我不确定这是否是默认行为，但对我来说似乎很奇怪。

Codepen

在此image中，我们可以看到轮播结束时我正在谈论的额外空间。这是我到目前为止使用的代码：

Owl Carousel JS 

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


      autoWidth:true,
      loop:false,
      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>            '
      ]



  })

HTML：父组件 

<div class="owl-carousel owl-theme cust-carousel">


  <ng-content></ng-content>



  </div>

子组件： 

<div class="item">

 <div class="section-one-card card type-one-e-card">

  <div class="section-one-icon type-one-heart-icon"> 
      <svg class="desktop-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18"><defs><style>.a11{fill:#ec7f4a;}</style></defs><g transform="translate(-9 -6)"><path class="a11" d="M16.5,3A6.037,6.037,0,0,0,12,5.05,6.037,6.037,0,0,0,7.5,3,5.4,5.4,0,0,0,2,8.4c0,3.708,3.4,6.729,8.55,11.32L12,21l1.45-1.295C18.6,15.124,22,12.1,22,8.4A5.4,5.4,0,0,0,16.5,3ZM12.1,18.253l-.1.1-.1-.1C7.14,14.026,4,11.23,4,8.4A3.386,3.386,0,0,1,7.5,4.962a3.912,3.912,0,0,1,3.57,2.315h1.87A3.886,3.886,0,0,1,16.5,4.962,3.386,3.386,0,0,1,20,8.4C20,11.23,16.86,14.026,12.1,18.253Z" transform="translate(7 3)"/></g></svg>
      <svg class="mobile-icon" xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8"><defs><style>.a12{fill:#ec7f4a;}</style></defs><path class="a12" d="M8.525,3A2.731,2.731,0,0,0,6.5,3.911,2.731,2.731,0,0,0,4.475,3,2.414,2.414,0,0,0,2,5.4c0,1.648,1.53,2.991,3.847,5.031L6.5,11l.653-.575C9.47,8.389,11,7.046,11,5.4A2.414,2.414,0,0,0,8.525,3ZM6.545,9.779,6.5,9.823l-.045-.044C4.313,7.9,2.9,6.658,2.9,5.4A1.515,1.515,0,0,1,4.475,3.872,1.761,1.761,0,0,1,6.081,4.9h.841a1.75,1.75,0,0,1,1.6-1.029A1.515,1.515,0,0,1,10.1,5.4C10.1,6.658,8.687,7.9,6.545,9.779Z" transform="translate(-2 -3)"/></svg>
    </div>


      <img class="section-one-image card-img-top type-one-cust-card-img"
        src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="Card image cap">


    <div class="section-one-card-body card-body type-one-small-card">
      <span class="type-one-text-one">HP -Pavilion</span>
      <span class="type-one-text-two">SD-430 Processor</span>
      <span class="type-one-text-three">{{data.newPrice}}</span>
    </div>

    </div>

    </div>

我使用的是autowidth = true，因为我将对不同类型的卡（宽度不同）使用轮播代码... 我的问题仅在我滑动到最后一个项目时发生。空格

2 个答案:

答案 0 :(得分：0)

请在选项中添加项目，

项目：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>            '
      ]



  })

谢谢

答案 1 :(得分：0)

通过添加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>

相关问题
最新问题