Как добавить промежуток между изображениями в слайдере карусели или убрать глюк при скольжении - PullRequest
Новая
       36

Как добавить промежуток между изображениями в слайдере карусели или убрать глюк при скольжении

1 голос
/ 07 апреля 2019

Я сделал одну карусель со ссылкой на эту ссылку и первоначально разместил на этой ссылке , но, к сожалению, я не хочу заполнять первое изображение.поэтому я удалил отступы для первого изображения, но это создает большую ширину изображения.

поэтому я удалил отступы для всех изображений и для разрыва я добавил margin-left 

.carousel-item img {
    padding: 0;
    margin-right: 1rem; /* for gap */
}

, но это создало некоторый типсбоя, когда я его сдвигаю.

, поэтому любое решение для добавления разрыва между изображениями (не в первом и последнем изображении)

Codepen Link: https://codepen.io/Nisharg/pen/qwajmx

$('#travelCarousel').carousel({
    interval: false
});

$('#travelCarousel.carousel .carousel-item').each(function(){
    let next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (let i=0;i<3;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> 
<style>
.carousel-item img {
  padding: 0;
  margin-right: 1rem; /* for gap */
}


  .carousel-inner .carousel-item.active,
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
      display: flex;
  }

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(33.33333333%);
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-33.33333333%);
  }

  .carousel-inner .carousel-item-right,
  .carousel-inner .carousel-item-left {
      transform: translateX(0);

  }
</style>
<div class="travel__carousel">
	<div id="travelCarousel" class="carousel slide" data-ride="carousel">
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=0" alt="img-1">
			</div>
			<div class="carousel-item">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=2" alt="img-2">
			</div>
			<div class="carousel-item">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=3" alt="img-3">
			</div>
			<div class="carousel-item">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=4" alt="img-4">
			</div>
			<div class="carousel-item">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=5" alt="img-5">
			</div>
		</div>
	</div>
	<div class="travel__arrows">
		<a class="btn" href="#travelCarousel" role="button" data-slide="prev"><i class="fas fa-arrow-left"></i></a>
		<a class="btn" href="#travelCarousel" role="button" data-slide="next"><i class="fas fa-arrow-right"></i></a>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

НЕ ХОЧУ ИСПОЛЬЗОВАТЬ ЛЮБУЮ ТРЕТЬЮ СТОРОНУ. JS LIKE SLICK.JS

Спасибо !!

Ответы [ 2 ]

1 голос
/ 08 апреля 2019

Я думаю, что самая большая проблема при таком подходе - это жестко закодированный «33,333%» перехода, который не учитывает разрыв / маржу. Если вы используете calc(x% + gap) в качестве значения для перехода, оно работает хорошо.

Кроме того, чтобы учесть все контрольные точки начальной загрузки, которые изменяют количество видимых слайдов, необходимо добавить различные смещения перехода (например, смещение 20% для маленьких экранов и смещение 50% для больших экранов). Грубый пример такого подхода можно найти в следующем codepen .

1 голос
/ 07 апреля 2019

Этот глюк связан с тем, что зазоры прозрачны, и вы видите следующий / предыдущий скользящий элемент через них. Одна идея состоит в том, чтобы сделать этот разрыв непрозрачным.

Например, вы можете добавить белый box-shadow к вашему изображению, чтобы закрыть прозрачный промежуток: 

.carousel-item img {
    padding: 0;
    margin-right: 1rem;
    /*added this*/
    box-shadow: 
       1rem 0 #fff,
      -1rem 0 0 #fff; 
}


$('#travelCarousel').carousel({
    interval: false
});

$('#travelCarousel.carousel .carousel-item').each(function(){
    let next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (let i=0;i<3;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> 
<style>
.carousel-item img {
  padding: 0;
  margin-right: 1rem; /* for gap */
  box-shadow:
     1rem 0 0 #fff,
    -1rem 0 0 #fff;
}


  .carousel-inner .carousel-item.active,
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
      display: flex;
  }

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(33.33333333%);
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-33.33333333%);
  }

  .carousel-inner .carousel-item-right,
  .carousel-inner .carousel-item-left {
      transform: translateX(0);

  }
</style>

<div class="travel__carousel">
	<div id="travelCarousel" class="carousel slide" data-ride="carousel">
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=0" alt="img-1">
			</div>
			<div class="carousel-item">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=2" alt="img-2">
			</div>
			<div class="carousel-item">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=3" alt="img-3">
			</div>
			<div class="carousel-item">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=4" alt="img-4">
			</div>
			<div class="carousel-item">
				<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=5" alt="img-5">
			</div>
		</div>
	</div>
	<div class="travel__arrows">
		<a class="btn" href="#travelCarousel" role="button" data-slide="prev"><i class="fas fa-arrow-left"></i></a>
		<a class="btn" href="#travelCarousel" role="button" data-slide="next"><i class="fas fa-arrow-right"></i></a>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...