Html owlcarousel 宽度有问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21188106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Having trouble with owlcarousel width
提问by user3123165
this is what the .html says
这就是 .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>
this is what i get when inspect
这是我在检查时得到的
<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"/>
i would like to change that width: 653px but i have no idea where to find that
我想改变那个宽度：653px 但我不知道在哪里可以找到
if someone can share the information that would be very nice :) thx
如果有人可以分享非常好的信息:) thx
回答by Jon
look in your javascript files for ".owlCarousel(" It should be a function that runs and controls the owl carousel. Its nothing to do with owl.carousel.min.js but rather a function that invokes that code. I have something like this:
在您的 javascript 文件中查找“ .owlCarousel(”它应该是一个运行和控制 owl carousel 的函数。它与 owl.carousel.min.js 无关，而是一个调用该代码的函数。我有这样的事情：
.owlCarousel({
items: 10,
rewindNav: false
});
Change the items:10and it should change your width per pic. Then you can add to your function things like -
改变它items:10，它应该改变你每张照片的宽度。然后你可以添加到你的功能中，比如 -
$("#owl-example").owlCarousel({
items:10,
itemsDesktop : [1199,10],
itemsDesktopSmall : [980,9],
itemsTablet: [768,5],
itemsTabletSmall: false,
itemsMobile : [479,4]
})
Look for "Customizing" - https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
寻找“定制” - https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
回答by Bharat Parmar
Try this
尝试这个
/* corrects margin between slides */
.owl-item img {
width: 96%;
margin: 0 auto;
}
回答by AdmireNL
The width is set by the plugins javascript with an inline style based on the available screen width divided by the amount of items.
宽度由插件 javascript 设置，内联样式基于可用屏幕宽度除以项目数量。
You have 6 items in your slider. Total wrapper width of 3918 divided by 6 items is 653px per item.
您的滑块中有 6 个项目。3918 的总包装宽度除以 6 个项目是每个项目 653 像素。
回答by Pete
The best solution for me was to just resize the image within the owl-item. I did not mind the extra whitespace around the image. I added the following code to my css file:
对我来说最好的解决方案是调整 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 */
}
.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 */
}
