jQuery 猫头鹰旋转木马没有固定宽度

Owl Carousel No Fixed Width

提问by Summer Developer

so I'm trying to use Owl Carouselwithout a fixed width because I need a responsive Wordpress site with no fixed images or widths, otherwise it breaks my mobile views.

所以我尝试使用没有固定宽度的Owl Carousel，因为我需要一个没有固定图像或宽度的响应式 Wordpress 网站，否则它会破坏我的移动视图。

I tried uncommenting the lines in owlcarousel.js where _widthand _widthsare set, and that sort of worked, except the items were then not centered within the .owl-stage. When I tried to alter the dimensions of the .owl-stagethe entire thing broke.

我尝试取消对 owlcarousel.js 中设置_width和_widths设置的行的注释，这种方法奏效了，除了项目没有在.owl-stage. 当我试图改变.owl-stage整个东西的尺寸时，整个东西都坏了。

Can anyone give advice on how to do this? I just want a responsive deployment of Owl Carousel where the widths etc are relative, rather than fixed.

任何人都可以就如何做到这一点提出建议吗？我只想要 Owl Carousel 的响应式部署，其中宽度等是相对的，而不是固定的。

回答by adriancarriger

Fiddle

小提琴

Set items to 1

将项目设置为 1

To make the Owl Carousel 2 show a single responsive slide you need to set the number of items to 1 instead of the default 3 and there is no need to use the responsive options offered in the docsbecause you always want to show a single slide.

要使 Owl Carousel 2 显示单个响应幻灯片，您需要将项目数设置为 1 而不是默认的 3，并且不需要使用文档中提供的响应选项，因为您总是想显示单个幻灯片。

JavaScript

JavaScript

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
})

Full Code

完整代码

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
})

.item {
  background-color: #4DC7A0;
  color: white;
  font-size: 30px;
  height: 150px;
  padding: 10px;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

回答by nartoan

I think you can you use attribute widthwith unit %

我认为你可以使用width单位 % 的属性

$('.owl-carousel').attr("width", "100%")

With unit % width of carousel will responsive follow width of screen device.

轮播的单位 % 宽度将响应屏幕设备的宽度。

Other, you can use css3 to responsive.Corresponding with width of screen device you set width different.

其他，你可以使用css3来responsive.对应屏幕设备的宽度你设置的宽度不同。

That all i know. if you want :

这就是我所知道的。如果你想 ：

1. Always show 1 element : you should set width of owl-itemis 100% and width of owl-carouselis : 100% .Or always show 2,3,4,5,.... you should set width of owl-itemis (100/2) %, (100/3)%, (100/4)%, ...
2. Corresponding with screen will show 4 for desktop, 1 for mobile :you show use breakpoint to set width. In other, you can try attribute min-widthor max-widthfor owl-itemto make it

1. 始终显示 1 个元素：您应该设置宽度 owl-item为 100% 和宽度owl-carousel为：100%。或者始终显示 2,3,4,5,.... 您应该设置宽度owl-item为 (100/2) %, ( 100/3)%, (100/4)%, ...
2. 与屏幕对应，桌面显示 4，移动显示 1：您显示使用断点设置宽度。在其他方面，您可以尝试使用 attributemin-width或max-widthforowl-item来制作它