移动iOS上的Owl-Carousel图像上的Bootstrap模式

Question

小但烦人的问题：

我有一个使用jquery owl-carousel插件的滚动图库。单击旋转木马中的图像时，它会弹出一个模态。在桌面上这可以正常工作 - 在移动设备上它是错误的。

通过拖动图像滚动后，除非多次轻击，否则图像有时无法点击。它会在点击几下后弹出模态，但是非常不一致。

有关如何解决此问题的任何建议吗？

（我可以使用Chrome开发工具中的代码重现问题＆gt;切换设备工具栏到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
    }
}
})