jquery - 移动 iOS 上 Owl-Carousel 图像上的 Bootstrap Modals

Question

小而烦人的问题:

我有一个使用 jquery owl-carousel 插件的滚动画廊。单击轮播中的图像时，将弹出一个模式。在桌面上这可以正常工作 - 在移动设备上它是错误的。

通过拖动图像滚动后，图像有时无法点击，除非点击几次。点击几下后它会工作并弹出模式，但非常不一致。

关于如何解决这个问题有什么建议吗？

(我可以在 chrome 开发工具中使用下面的代码重现该问题 > 将设备工具栏切换到 iPhone)

$('.loop').owlCarousel({
    center: true,
    nav:true,
    items:2,
    loop:true,
    margin:10,
    responsive:{
        600:{
            items:4
        }
    }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/assets/owl.carousel.css" rel="stylesheet"/>





	        <div class="loop owl-carousel owl-theme">
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal1">
	              	<img src="https://placehold.it/400x400">
	              	
	              </div>
	            </div>
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal2">
	              	<img src="https://placehold.it/400x400">
	              	
	              </div>
	            </div>
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal3">
	              	<img src="https://placehold.it/400x400">
	              	
	              </div>
	            </div>
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal4">
	              	<img src="https://placehold.it/400x400" >
	              	
	              </div>
	            </div>
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal5">
	              	<img src="https://placehold.it/400x400" >
	              	
	              </div>
	            </div>
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal6">
	              	<img src="https://placehold.it/400x400">
	              	
	              </div>
	            </div>
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal7">
	              	<img src="https://placehold.it/400x400">
	              	
	              </div>
	            </div>
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal8">
	              	<img src="https://placehold.it/400x400">
	              	
	              </div>
	            </div>
	        	
	            <div class="item">
	              <div class="CarouselImage" data-toggle="modal" data-target="#GModal9">
	              	<img src="https://placehold.it/400x400" >
	              	
	              </div>
	            </div>
	        	
	        </div>







<div class="modal fade" id="GModal1">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800"  />
    	</div>
    </div>
</div>

<div class="modal fade" id="GModal2">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800" />
    	</div>
    </div>
</div>

<div class="modal fade" id="GModal3">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800"  />
    	</div>
    </div>
</div>

<div class="modal fade" id="GModal4">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800" />
    	</div>
    </div>
</div>

<div class="modal fade" id="GModal5">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800"  />
    	</div>
    </div>
</div>

<div class="modal fade" id="GModal6">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800" />
    	</div>
    </div>
</div>

<div class="modal fade" id="GModal7">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800" />
    	</div>
    </div>
</div>

<div class="modal fade" id="GModal8">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800" />
    	</div>
    </div>
</div>

<div class="modal fade" id="GModal9">
    <div class="modal-dialog modal-lg">
      	<div class="GalleryModalHolder">
      		<img class="GalleryModalImg" src="https://placehold.it/800x800"  />
    	</div>
    </div>
</div>















<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.3/owl.carousel.min.js"></script>

Answer 1

您正在寻找 bootstrap 的响应式实现，因此将 div 包装在具有不同屏幕列大小的容器、列、行等基于网格的实现中，同时在 responsiveClass:true, 中进行以下更改

$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
    0:{
        items:1,
        nav:true
    },
    600:{
        items:3,
        nav:false
    },
    1000:{
        items:5,
        nav:true,
        loop:false
    }
}
})