Search code examples
javascripthtmlangularowl-carousel

How to display only a single item in Owl Carousel?

So I'm using ngx-owl-carousel in my project to display slides that will display dynamic data coming from REST API.The carousel works fine when the number of data coming are large.But in case of when only one data the carousel display repeated slides based on the screen width instead of just one. How to fix it Here is my set carousel properties:

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  
  }
}

Here is my 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>

Here is the output that I'm getting: As you can see the slides are repeated when there is only single item in userData array.enter image description here

Solution

  • You can use loop:false so it will not make a duplicate items.

    Hope this will help you

    $('.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>