Изменить ширину изображений в сове-карусели - PullRequest
Новая
       5

Изменить ширину изображений в сове-карусели

1 голос
/ 23 января 2020

Я пытаюсь изменить ширину изображений в моей сове-карусели. 

            <!-- 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>"]
    });
};

1 Ответ

0 голосов
/ 23 января 2020

Сова Карусель динамически устанавливает ширину div.item при изменении размера окна браузера, но не элементы внутри каждого div.item. Таким образом, вы можете предоставить CSS для этого. Поскольку вы уже используете Bootstrap, взгляните на эти CSS классы, которые он предоставляет https://getbootstrap.com/docs/4.0/content/images/

...