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

Question

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

try creating a demo on stackblitz – Allabakash Nov 24 '19 at 08:44 — Allabakash, Nov 24 '19 at 08:44

score 0 · Answer 1 · edited Nov 24 '19 at 11:39

0

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.

edited Nov 24 '19 at 11:39

Avinash Dalvi

8,551
7
27
53

answered Nov 24 '19 at 08:02

Akram Gorashi

1

score 0 · Answer 2 · answered Dec 03 '19 at 23:11

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

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

2 Answers2