Search code examples
jquerycssowl-carousel

Can't affect carousel width

Struggling on changing carousel width.

The pictures of the carousel are vertical oriented so the width is way too big. Been playing with width (%, px, vh) and nothing appears to affect the width of the carousel. It's always displayed the same. enter image description here

  .owl-carousel.major-caousel .slider-item {
    width: 50%;
  }

  .owl-carousel.major-caousel .slider-item img {
    margin-bottom: 0;
    position: relative;
    object-fit:cover;
    top: 0;
    max-height: 70vh;
  }

html

<section class="section slider-section">
    <div class="row">
        <div class="col-md-12">
            <div class="home-slider major-caousel owl-carousel mb-5" data-aos="fade-up" data-aos-delay="200">
                <div class="slider-item">
                    <img src="/../img/cover_up/<?php echo $product->name . $i . ".jpg"; ?>" alt="Image placeholder" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>

Making the width: 100% will only make the image retake its native sizing (therefore zooming). Also played with max-width, width and so on.

Ideas?

Edit: Adding html.

Solution

  • You are using owl carousel if am not mistaken so.

    CSS code

    .owl-carousel .owl-stage-outer {
    width: 50%;
    margin: 0 auto;
}

    Also in the carousel object change the number of displayed items to be 1

    var owl = $('.owl-carousel');
        owl.owlCarousel({
            loop: true,
            dots: false,
            autoplay: true,
            autoplayTimeout: 4000,
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 1, // make sure this number is 1 to display one item in the slide
                    nav: true
                }
            }
        });