Question

这就是.html所说的

<div class="row">
  <div class="col-lg-7 col-sm-6">
    <div class="owl-carousel" id="homeCarousel">
      <div class="item">
      <img src="images/brela.jpg" alt="brela makarska">
      </div>
    </div> 
  </div> 
</div>

这是我在检查时得到的

<div class="row">
<div class="col-lg-7 col-sm-6">
<div class="owl-carousel owl-theme" id="homeCarousel" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 3918px; left: 0px; display: block; -webkit-   transform: translate3d(0px, 0px, 0px); -webkit-transform-origin: 326.5px 50%;">
<div class="owl-item" style="width: 653px;">
<div class="item">
<img src="images/brela.jpg" alt="brela makarska"/>

我想改变那个宽度：653px，但我不知道在哪里找到

如果有人可以分享非常好的信息:) THX

Answer 1

在您的javascript文件中查找＆＃34; .owlCarousel(＆＃34;它应该是一个运行和控制猫头鹰轮播的功能。它与owl.carousel.min.js无关，而是一个调用该代码的函数。我有这样的事情：

 .owlCarousel({
    items: 10,
    rewindNav: false
});

更改items:10，它应该会更改每张照片的宽度。然后，您可以添加诸如 -

之类的功能

$("#owl-example").owlCarousel({ 
        items:10,   
        itemsDesktop : [1199,10],
        itemsDesktopSmall : [980,9],
        itemsTablet: [768,5],
        itemsTabletSmall: false,
        itemsMobile : [479,4]
})

寻找＆＃34;定制＆＃34; - https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Answer 2

试试这个

/* corrects margin between slides */
.owl-item img {
width: 96%;
margin: 0 auto;
}

Answer 3

宽度由插件javascript设置，内嵌样式基于可用的屏幕宽度除以项目数量。

滑块中有6个项目。总包装纸宽度3918除以6项为每件653px。

Answer 4

对我来说最好的解决方案是在owl-item中调整图像大小。我不在乎图像周围的多余空白。我在css文件中添加了以下代码：

.owl-item .item { margin-left: 50px; width: 185px; /* This is with the expectation that there are 4 items for the carousel, set in Theme/js/main.js */ }

owlcarousel宽度有问题

4 个答案: