文章/答案/技术大牛

发布

社区首页 >问答首页 >OWL Carousel 2宽度不正确，显示所有项目

问OWL Carousel 2宽度不正确，显示所有项目
EN

Stack Overflow用户

提问于 2015-12-02 22:59:18

回答 3查看 11.2K关注 0票数 0

我有以下OWL Carousel 2初始化代码：

  $(document).ready(function(){
            moment.locale('nl-NL');

            $("#owl-slider").owlCarousel({ 
              items: 1,
              responsive: false,
              nav : false,
              loop: false,
              dots: true,                  
              dotsEach: 1,
              autoplaySpeed : 300,
              dotsSpeed : 400,
              autoPlay: true,
              navRewind: true,
              animateOut: 'fadeOut'
            });

        });

这将产生轮播的以下html：

  <div class="item-list" id="newsblock">
    <div id="owl-slider" class="owl-carousel owl-theme owl-loaded">
        <div class="owl-stage-outer">
            <div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;">
                <div class="owl-item" style="width: 467px; margin-right: 0px;">
                    <div class="item">
                        <img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
                        <div class="header">
                            <h2 class="title">
                                <a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark">Nieuwsbericht</a>
                            </h2>
                            <div class="time">17 November</div>
                        </div>
                    </div>
                </div><div class="owl-item" style="width: 467px; margin-right: 0px;">
                    <div class="item">
                        <img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#">
                        <div class="header">
                            <h2 class="title">
                                <a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark">Nog meer nieuws</a>
                            </h2>
                            <div class="time">17 November</div>
                        </div>
                    </div>
                </div>
                <div class="owl-item active" style="width: 467px; margin-right: 0px;">
                    <div class="item">
                        <img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
                        <div class="header">
                            <h2 class="title">
                                <a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark">Test</a>
                            </h2>
                            <div class="time">17 November</div>
                        </div>
                    </div>
                </div>
            </div>
        </div><div class="owl-controls">
            <div class="owl-nav">
                <div class="owl-prev" style="display: none;">prev</div>
                <div class="owl-next" style="display: none;">next</div>
            </div>
            <div class="owl-dots" style="">
                <div class="owl-dot"><span></span></div>
                <div class="owl-dot"><span></span></div>
                <div class="owl-dot active"><span></span></div>
            </div>
        </div>
    </div>
</div>

问题是owl-stage div的宽度被设置为所有三个项的宽度，而不是1。所有项都显示为1。

请提供一些可能的解决方案的指导！

致以亲切的问候。

javascript

css

owl-carousel

回答 3

Stack Overflow用户

发布于 2019-09-19 14:36:37

我通过将以下代码添加到css解决了我的问题：

.owl-item {
  float: left;
}
.owl-carousel {
  overflow: hidden;
}

票数 1

Stack Overflow用户

发布于 2015-12-02 23:02:18

将singleItem:true添加到您的javascript。

这将使它一次只显示一张图像。

票数 -1

Stack Overflow用户

发布于 2015-12-03 07:10:32

如果轮播中有多个项目，owl阶段div的宽度将始终延伸到父轮播容器(div转盘“owl-slider”class="owl-carousel owl-id=“)之后。这个问题很容易解决，只需在CSS中将overflow设置为隐藏即可。

.owl-carousel {
   overflow: hidden;
}

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34045875

复制

相似问题

问OWL Carousel 2宽度不正确，显示所有项目
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问OWL Carousel 2宽度不正确，显示所有项目EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问OWL Carousel 2宽度不正确，显示所有项目
EN