Question

我正在尝试更改猫头鹰传送带中图像的宽度。

            <!-- 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，请查看它提供的https://getbootstrap.com/docs/4.0/content/images/

这些CSS类。

更改猫头鹰轮播中图像的宽度

1 个答案: