如何在 Owl Carousel 中只显示单个项目？

Question

所以我在我的项目中使用 ngx-owl-carousel 来显示幻灯片，这些幻灯片将显示来自 REST API 的动态数据。当传入的数据数量很大时，轮播可以正常工作。但是如果只有一个数据，轮播会显示根据屏幕宽度重复幻灯片，而不仅仅是一张。如何修复它这是我设置的轮播属性：carouselOptions = {autoplay:false,autoplayTimeout:3000,autoplayHoverPause:false,autoWidth:false,items:1,singleItem: true,loop:true,nav: true,navText: ["<i aria-hidden='true' class='fa fa-caret-left prev' id='prev'></i>","<i aria-hidden='true' class='fa fa-caret-right next'></i>"],navClass: ['owl-prev', 'owl-next'],responsiveClass: true,responsive: {  0:{    items:1,     nav:true,    dots:false  },  576: {    items: 1,    nav: true,    dots:false  },  768: {    items: 2,    nav: true  },  1050: {    items: 3,    nav: true  },  1400: {    items: 4,    nav: true    }}这是我的html：<owl-carousel [options]="carouselOptions" [items]="userData"      [carouselClasses]="['owl-theme', 'row', 'sliding']">      <div class="item mt-4" id="item" *ngFor="let data of userData;let i = index">                         <div class="card-body">                <div class="card-title mb-0 random" >                  <div class="title">                    <div class="user-info">                      <div>{{data.name}}</div>&nbsp;&nbsp;|&nbsp;&nbsp;                      <p>{{data.contact}}</p>                    </div>                    <div class="setting-icon">                      <i class="fa fa-cog"></i>                    </div>                  </div>                </div>                <div class="after-title pt-3">                  <div class="p-2">                    <h6 class="card-subtitle text-muted">                      <div class="subtitle"> <i class="fa fa-edit"></i><i class="fa fa-expand"></i></div>                    </h6>                    <p class="card-text main-card-text" id="notes">{{ data.message }}</p>                  </div>                </div>              </div>      </div>    </owl-carousel>这是我得到的输出：如您所见，当 userData 数组中只有单个项目时，幻灯片会重复。

Answer 1

您可以使用loop:false这样它就不会产生重复的项目。

希望能帮到你

$('.with-loop').owlCarousel({

    loop:true,

    margin:10,

    nav:true,

    responsive:{

        0:{

            items:3

        },

        600:{

            items:3

        },

        1000:{

            items:5

        }

    }

})

$('.without-loop').owlCarousel({

    loop:false,

    margin:10,

    nav:true,

    responsive:{

        0:{

            items:3

        },

        600:{

            items:3

        },

        1000:{

            items:5

        }

    }

})

.with-loop {

margin-bottom: 30px;

}

.item {

height: 30px;

width: 40px;

background: red;

color: #fff;

text-align: center

}

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

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" />

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" />

<div class="owl-carousel owl-theme with-loop">

    <div class="item">1</div>

    <div class="item">2</div>

    <div class="item">3</div>

</div>

<div class="owl-carousel owl-theme without-loop">

    <div class="item">1</div>

    <div class="item">2</div>

    <div class="item">3</div>

</div>