CODEWITHSUNDEEP
htmlcssangularowl-carouselowl-carousel-2
Smaillns
Smaillns

Reputation: 3157

ngx-owl-carousel case of a single item which take all width

the ngx-owl-carousel items don't have css property maximising width for responsivity aim, I use the following custom options

customOptions: OwlOptions = {
loop: true,
margin: 10,
navSpeed: 700,
responsive: {
  0: {
    items: 1
  },
  400: {
    items: 2
  },
  740: {
    items: 3
  },
  940: {
    items: 4
  }
}
};

the probelm is that in case when I have just one element to show, this last will take all parent width; is there an option to tell owl-carousel to consider the calculated width ? Thanks

Upvotes: 1

Views: 3070

Answers (2)

Smaillns
Smaillns

Reputation: 3157

Ahm! Here I am.. so I will answer my question ^^' the 'autoWidth:true' property didn't work, so I applied css on owl-item class as below using ::ng-deep ;)

owl-carousel-o {
 ::ng-deep{
  .owl-stage{
    .owl-item{
      width: auto!important;
    }
  }
 }
}

Upvotes: 0

Akram Gorashi
Akram Gorashi

Reputation: 1

Is it possible to have auto-width owl items and the stage container to be the total of the widths ?

I tried to apply css on stage

display:flex-inline

and

owl-itemswidth:auto

but the sliding does not move with the owl items size, it leaves an empty space on the end of carousel, which I think is the sum of the items width subtracting the stage width.

Upvotes: 0

Related Questions