CODEWITHSUNDEEP
angulartypescriptresizeowl-carouselautoresize
DESTROYER GG
DESTROYER GG

Reputation: 43

Resize Owl-Carousel items when container width changes

I am using ngx-owl-carousel-o and I have a particular problem. I want the owl-carousel to resize the items when the container resizes. This is because I have a side menu that resizes the main content every time it is opened, and that makes part of the item not visible. The responsive resizing that comes with the module works fine when there is a change in screen width but I can't do anything when I change the container itself.

full-size container

compressed container

These are the OwlOption I used:

OptionsCustom: OwlOptions = {
    items: 1,
    loop: true,
    margin: 30,
    autoWidth: true,
    autoHeight: true,
    stagePadding: 50,
    nav: true,
    navText: [
      "<i class='icofont icofont-curved-left'></i>",
      "<i class='icofont icofont-curved-right'></i>",
    ],
    responsive: {
      0: {
        items: 1,
      },
    },
  };

I tried many things like using Refresh from CarouselServices, setting the width to 100%, or looking for options like responsiveBaseElement (there is no such option now).

Upvotes: 0

Views: 72

Answers (0)

Related Questions