Как сделать чтобы можно чтобы было в карусели touch-пролистывание, а не только кнопки, не очень удобно на телефонах тыкать на кнопки?

Question

[Алексей]

Всем привет! Как сделать чтобы в карусели было touch-пролистывание, а не только кнопки, не очень удобно на телефонах тыкать на кнопки?

<wrapper>
  	<div id="dws-slider" class="carousel slide" data-ride="carousel">
  		<!--Показатели-->
  		<ol class="carousel-indicators">
  			<li data-target="#dws-slider" data-slide-to="0" class="active"></li>
  			<li data-target="#dws-slider" data-slide-to="1"></li>
  			<li data-target="#dws-slider" data-slide-to="2"></li>
  		</ol>

  		<!--Обертка для слайдов-->
  		<div class="carousel-inner" role="listbox">
  			<div class="item active"><img src="img/Lorry.png" alt="Картинка 1" max-width="100%" >
  				<div class="carousel-caption">
  				  
  					

  				</div>
  			</div>
  			<div class="item"><img src="img/Trane.png" alt="Картинка 2" max-width="100%" >
  				<div class="carousel-caption">


  				</div>
  			</div>
  			<div class="item"><img src="img/Aircraft.png" alt="Картинка 3" max-width="100%" >
  				<div class="carousel-caption">


  				</div>
  			</div>
  		</div>

  		<!--Элементы управления-->
  		<a class="left carousel-control" href="#dws-slider" role="button" data-slide="prev">
  			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  			<span class="sr-only">Previous</span>
  		</a>
  		<a class="right carousel-control" href="#dws-slider" role="button" data-slide="next">
  			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  			<span class="sr-only">Next</span>
  		</a>
  	</div>
  </wrapper>

.carousel-inner h3 {
 font-size: 20px;
 padding: 15px;
}
.carousel-inner p {
 font-size: 16px;
 padding: 10px;
}

@media all and (max-width: 768px){
 .carousel-caption {
  bottom: 10%;
 }
 .carousel-inner h3 {
  font-size: 18px;
 }
 .carousel-inner p {
  font-size: 14px;
 }
}
@media all and (max-width: 600px) {
 .carousel-inner h3,
 .carousel-inner p {
  display: none;
 }
}

Comments

[Вадим]

Вот бы вы ещё указали какой js слайдер используете.. а если ещё бы и в песочнице свой код оформили.
А ещё что это у вас за элемент такой "wrapper"?

[Ankhena]

Если вы учитесь писать слайдеры, то вот, например, статейка https://habr.com/ru/post/501258/
Если нужно решение, то возьмите swiper.js

[Алексей]

Вадим, Это всего лишь контейнер для удобства, заключая блоки в обертку проще центрировать, задавать общую ширину и так далее.

[Вадим]

Алексей, В HTML нет такого элемента.

Answer 1

[Иван К]

Я использую Slick Slider, в нем все очень хорошо настраивается, и тач, и чувствительность и все остальное.

Comments

[Алексей]

Спасибо, гляну