更改 owl-carousel 中图像的宽度

Question

我正在尝试更改 owl-carousel 中图像的宽度。

            <!-- Slider -->
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="owl-carousel owl-carousel-fullwidth">
                        <div class="item"><img src="images/frontview.jpg" alt="image"></div>
                        <div class="item"><img src="images/entry.jpg" alt="image"></div>
                        <div class="item"><img src="images/register.jpg" alt="image"></div>
                        <div class="item"><img src="images/bulk2.jpg" alt="image"></div>
                        <div class="item"><img src="images/herbs3.jpg" alt="image"></div>
                        <div class="item"><img src="images/overhead.jpg" alt="image"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slider -->

如果我右键单击图像以检查元素，则会采用以下内联样式：

<div class="owl-item" style="width: 960px; margin-right: 0px;">

我能在文档中找到的关于宽度的唯一信息是关于 autoWidth，这对我没有帮助。

有任何想法吗？ 谢谢！

var owlCarouselFeatureSlide = function() {
    $('.owl-carousel').owlCarousel({
        animateOut: 'fadeOut',
        autoplay: true,
        autoplayTimeout: 5000,
        autoHeight: true,
        items: 1,
        margin: 0,
        responsiveClass: true,
        nav: true,
        dots: true,
        // smartSpeed: 500,
        navText : ["<i class='icon icon-chevron-left'></i>","<i class='icon icon-chevron-right'></i>"]
    });
};

Answer 1

Owl Carousel 会在浏览器窗口调整大小时动态设置 div.item 的宽度，而不是每个 div.item 中的元素。 所以，你可以提供 CSS 来做到这一点。 由于您已经在使用 Bootstrap，请查看它提供的这些 CSS 类https://getbootstrap.com/docs/4.0/content/images/