0

Всем привет! Есть во такой скролинг изображений. У него есть ряд недостатков:

  1. Нет индикации какое именно фото отображено сейчас, первое или второе.
  2. Нет способа управлять с смартфонов или сенсорного экрана.

Если первый недостаток можно еще простить, то вторая проблема, неплохо так бесит) Может ли кто подсказать, как задействовать кнопки "далее" и "назад", что бы дать пользователю с сенсорным экраном, хоть какое право на жизнь.

Возможно у кого то будет альтернативный вариант карусели или слайдера для списка карточек.

Заранее благодарен!

	jQuery(document).ready(function() {
		
		jQuery(".company-gallery").each(function(){
			jQuery(this).children().children().first().show();
		});
		
		var visibleChild = 1;
		
		jQuery(".company-gallery").mousemove(function( event ) {
			var nrChildren = jQuery(this).children().children().size();
			var offsetX = parseInt(jQuery(this).offset().left);
			var width = parseInt(jQuery(this).width());
			var currentChild = parseInt((event.pageX - offsetX) / (width/nrChildren));
			if((currentChild+1)>=nrChildren){
				currentChild = nrChildren-1;
			}
			if(currentChild!=visibleChild){
				jQuery(this).children().children().hide();
				jQuery(this).children().children().eq(currentChild).show();
				visibleChild = currentChild;
			}
			
		});
    
    });
.item-place {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
	}
  
  .col-md-5 {
	width: 500px;
	}
  .company-gallery {
    height: 225px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
	}
  .company-gallery img {
    height: 100%;
    width: auto !important;
    min-width: 100%;
	}
  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
	background:#eee;
    border: 1px solid #ddd;
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.3;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="item-place">
	<div class="col-md-5">
		<div class="company-gallery">
			<a target="_blank" href="#">
				<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" style="display:none">
				<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhNCxpf7pVvzKAHFEfEOuthXqFx8sAN_O2PVQFhF4p5ltbNPM7" style="display:none">
				<img src="http://wowslider.com/sliders/demo-11/data/images/krasivyi_korabl_-1024x768.jpg" style="display:none">
			</a>
		</div>
		<span class="btn btn-default prev">Назад</span> 
		<span class="btn btn-default next">Дальше</span> 
	</div>
	</div>
  
  <div class="item-place">
	<div class="col-md-5">
		<div class="company-gallery">
			<a target="_blank" href="#">
				<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" style="display:none">
				<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhNCxpf7pVvzKAHFEfEOuthXqFx8sAN_O2PVQFhF4p5ltbNPM7" style="display:none">
				<img src="http://wowslider.com/sliders/demo-11/data/images/krasivyi_korabl_-1024x768.jpg" style="display:none">
			</a>
		</div>
		<span class="btn btn-default prev">Назад</span> 
		<span class="btn btn-default next">Дальше</span> 
	</div>
	</div>
  
  <div class="item-place">
	<div class="col-md-5">
		<div class="company-gallery">
			<a target="_blank" href="#">
				<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" style="display:none">
				<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhNCxpf7pVvzKAHFEfEOuthXqFx8sAN_O2PVQFhF4p5ltbNPM7" style="display:none">
				<img src="http://wowslider.com/sliders/demo-11/data/images/krasivyi_korabl_-1024x768.jpg" style="display:none">
			</a>
		</div>
		<span class="btn btn-default prev">Назад</span> 
		<span class="btn btn-default next">Дальше</span> 
	</div>
	</div>

2
  • 1
    Не совсем понял, в чём заключается ваша проблема. Попробуйте составить минимальный воспроизводимый пример и расписать словами, что вы хотели бы получить.
    – mymedia
    28 мар 2019 в 19:49
  • Спасибо за замечание, расписал более подробно.
    – user331892
    28 мар 2019 в 21:38

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.