Question

我试图在左侧显示其他项目的一部分，并使用猫头鹰旋转木马在右侧显示完整项目。

每个项目我都有一个横幅图像和文本，使用引导网格列分割。

我能够使用stagepadding实现部分显示：200 并且仅显示左侧的部分图像我使用右侧：-200px在.owl-stage类的css中。

现在，问题是在左侧我需要显示该部分幻灯片的横幅图像，而不是文本......

owl滑块有活动类，所以用css我试图隐藏那个文本列，当它不活动时...它工作，但我看到的只是左边的空白空间，它没有推动横幅图像自动。

请查看截图我想要实现的目标：http://imgur.com/MlaN5t5 我得到了什么：http://imgur.com/z1UG6lK

实际上白色空间填充了文本列，但是用css隐藏了。当部分显示时，我需要左边的横幅图像来接管整个空间，但是当特定的幻灯片项目处于活动状态时，我会像往常一样显示图像和文本。

这是我的js脚本。

			jQuery(document).ready(function($) {
				$('.owl-carousel').owlCarousel({
					center: true, 
					autoplay:false, 
					autoplayTimeout:5000,
					autoplayHoverPause:false,
					stagePadding: 150, 
					items:1,           
					loop:true,     
					margin:0,      
					responsive:{
						600:{
							items:1 
						}
					},
					onInitialized : function(){
						if($('.owl-item').first().hasClass('active'))
							$('.owl-prev').hide();
						else
							$('.owl-prev').show();
					} 
				}); 
			});

Answer 1

您可能需要尝试使用以下选项：

1. autoWidth: true, //为您的商品设置固定宽度; https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html

2. rtl:true, //让你的物品站在右边; https://owlcarousel2.github.io/OwlCarousel2/demos/rtl.html

Answer 2

如果您只想在轮播中显示下一个项目的一半，则需要为.owl-wrapper添加样式（请确保其具有box-sizing：content-box）

.owl-wrapper {
   padding-right: 60px;
}

并用helper div包裹转盘，这样您就可以使容器的宽度变为100％：

.owl-carousel-helper {
   margin-right: 60px;
}

所以html看起来像这样：

<div class="owl-carousel-helper">
   <div class="owl-carousel">...</div>
</div>

Answer 3

最简单的方法是使用stagePadding: 100

jQuery(document).ready(function(){
   jQuery('.owl-carousel').owlCarousel({
      margin: 10,
      loop: true,
      items: 1,
      stagePadding: 100
   });
});

Answer 4

您可以尝试设置items: 1.5或其他任何浮点值（让其变硬）

最好的方法是简单地添加更多保证金

    SlideOptions = {
        dots: false,
        loop: false,
        nav: false,
        items: 2,
        margin: 160,
        rtl: true,
        responsive: false
    };

在我的情况下，每个元素的宽度为250px

所以我将边距设置为150

注意：您可以尝试将响应设置为false或true来自己管理宽度

这是结果的图片： https://i.stack.imgur.com/u7bRX.jpg

Answer 5

这很容易“也可以在 angular 2 + （ngx-owl-carousel-o）上使用”

只需增加边距，然后将项目数从1更改为1.5或1.4即可。

示例：-

jQuery(document).ready(function($) {
            $('.owl-carousel').owlCarousel({
                center: true, 
                autoplay:false, 
                autoplayTimeout:5000,
                autoplayHoverPause:false,
                items:1.4,           
                loop:true,     
                margin:20,      
                responsive:{
                    600:{
                        items:1.4 
                    }
                },
                onInitialized : function(){
                    if($('.owl-item').first().hasClass('active'))
                        $('.owl-prev').hide();
                    else
                        $('.owl-prev').show();
                } 
            }); 
        });

显示Owl Carousel上其他项目的一半

5 个答案: