2

我目前正在尝试创建一个响应式轮播，其中包含不同数量的项目和宽度/边距，我正在使用Owl Carousel

Owl Carousel 提供了一个很棒的小选项，它允许您以这种方式指定在特定屏幕尺寸下显示多少项目：

carousel.owlCarousel({
    items : 4,
    itemsDesktop : [1100,3],
    itemsDesktopSmall : [700,2],
    itemsTablet: [600,2],
    itemsMobile : [400, 1]
});

因此，在窗口宽度 700 到 1100 之间，轮播将显示 3 个项目。

这是我的轮播项目采用的基本结构。

<div class="owl-item">
    <div class="item">
        ITEM CONTENT
    </div>
</div>

由于某些样式要求，.item 上需要有一个百分比的右侧边距

我想使用媒体查询添加它，但是因为 JS 测量窗口的宽度，CSS 媒体查询测量视口的宽度，当存在滚动条时，我的 JS 中指定的值与 CSS 媒体查询宽度无关.

谁能想到解决这个问题？（最好没有任何沉重的jquery）

4

0 回答 0