Bootstrap Модалы на изображениях Сова-Карусель на мобильном iOS - PullRequest
Новая
       14

Bootstrap Модалы на изображениях Сова-Карусель на мобильном iOS

0 голосов
/ 15 мая 2018

Небольшая, но раздражающая проблема:

У меня есть галерея прокрутки, использующая плагин 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>

1 Ответ

0 голосов
/ 15 мая 2018

Вы ищете адаптивную реализацию начальной загрузки, поэтому перенесите div для реализации на основе сетки с контейнером, столбцом, строкой и т. Д. С другим размером столбца экрана, а также внесите следующие изменения в responseiveClass: 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
    }
}
})
...