在猫头鹰旋转木马上显示其他项目的一半

Question

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

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

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

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

owl slider 具有活动类，因此使用 css，我尝试在文本列不活动时隐藏该文本列...它有效，但我看到的只是左侧的空白空间，它没有自动推送横幅图像。

请查看屏幕截图我想要实现什么：https://i.stack.imgur.com/nJXGQ.jpg 我得到什么：https://i.stack.imgur.com/YquFy.jpg

该空白实际上填充了文本列，但被 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

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

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