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

【问题标题】：Show half of the other item on Owl Carousel在 Owl Carousel 上显示其他项目的一半
【发布时间】：2017-08-09 05:43:12
【问题描述】：

我正在尝试使用 owl carousel 在左侧显示其他项目的一部分并在右侧显示完整项目。

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

我能够使用 stagepadding 实现部分显示：200 为了仅在左侧显示部分图像，我在 .owl-stage 类的 css 中使用了 right:-200px。

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

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();
					} 
				}); 
			});

【问题讨论】：

标签： jquery wordpress carousel owl-carousel

【解决方案1】：

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

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

【讨论】：

对于它的价值，这是最好的答案。简单有效。

【解决方案2】：

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

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

2.rtl:true, // 让你的物品保持在右侧； https://owlcarousel2.github.io/OwlCarousel2/demos/rtl.html

【讨论】：

【解决方案3】：

这很容易“也适用于 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();
                } 
            }); 
        });

【讨论】：

【解决方案4】：

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

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

并用辅助 div 包裹你的轮播，这样你就可以让你的容器 100% 宽度回来：

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

所以 html 看起来像这样：

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

【讨论】：

【解决方案5】：

您可以尝试设置items: 1.5 或任何其他浮点值（但它会造成困难）

最好的方法是简单地增加保证金

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

在我的例子中，每个元素的宽度是 250px

所以我设置了 150 的边距

注意：你可以尝试设置 responsive false 或 true 来自己管理宽度

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

【讨论】：