时间戳

首页 > 解决方案 > 如何在 Owl Carousel 中只显示单个项目？

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

问题描述

所以我在我的项目中使用 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 class="footer">
                    <i class="fa fa-paperclip pt-1 pl-2"></i> &nbsp; &nbsp;
                    <i class="fa fa-lock pt-1"></i>&nbsp; &nbsp;
                    <i class="fa fa-hand-rock-o pt-1"></i>&nbsp; &nbsp;
                    <i class="fa fa-save pt-1"></i>
                  </div>
                </div>
              </div>
      </div>
    </owl-carousel>

这是我得到的输出：如您所见，当 userData 数组中只有单个项目时，幻灯片会重复。在此处输入图像描述

标签： javascripthtmlangularowl-carousel

解决方案

您可以使用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>

推荐阅读