显示Owl Carousel上其他项目的一半-Java 学习之路

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

每个项目我有一个 Banner 图像和文本，使用引导网格列分割 .

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

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

猫头鹰滑块有活动类，所以用css我试图隐藏那个文本列，当它不活动时...它工作，但我看到的只是左侧的空白空间，它没有自动推送 Banner 图像 .

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

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

这是我的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();
					} 
				}); 
			});

2 回答

1
您可能需要尝试以下选项：
1. autoWidth: true, //设置物品的固定宽度; https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html
2. rtl:true, //让你的物品站在右边; https://owlcarousel2.github.io/OwlCarousel2/demos/rtl.html
回复于 2024-04-29T14:44:07+08:00

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

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

回复于 2024-04-29T14:44:07+08:00

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

2 回答

相关问题