如何在 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({&nbsp; &nbsp; loop:true,&nbsp; &nbsp; margin:10,&nbsp; &nbsp; nav:true,&nbsp; &nbsp; responsive:{&nbsp; &nbsp; &nbsp; &nbsp; 0:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:3&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; 600:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:3&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; 1000:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:5&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }})$('.without-loop').owlCarousel({&nbsp; &nbsp; loop:false,&nbsp; &nbsp; margin:10,&nbsp; &nbsp; nav:true,&nbsp; &nbsp; responsive:{&nbsp; &nbsp; &nbsp; &nbsp; 0:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:3&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; 600:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:3&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; 1000:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:5&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}).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">&nbsp; &nbsp; <div class="item">1</div>&nbsp; &nbsp; <div class="item">2</div>&nbsp; &nbsp; <div class="item">3</div></div><div class="owl-carousel owl-theme without-loop">&nbsp; &nbsp; <div class="item">1</div>&nbsp; &nbsp; <div class="item">2</div>&nbsp; &nbsp; <div class="item">3</div></div>