Как добавить промежутки между изображениями в слайдере карусели или убрать сбой при слайде
Я сделал карусель со ссылкой на этот связь и первоначально разместил на этом связь, но, к сожалению, я не хочу отступов в первом изображении. Поэтому я удалил заполнение первого изображения, но это создало большую ширину изображения.
Поэтому я удалил отступы на всех изображениях, а для пробела добавил левое поле.
.carousel-item img {
padding: 0;
margin-right: 1rem; /* for gap */
}
но это создало какой-то сбой, когда я его сдвигал.
Есть ли решение для добавления промежутка между изображениями (не в первом и последнем изображении)?
Ссылка на Codepen: 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-библиотеку, такую как Slick.js.
Ответы 2
Этот глюк связан с тем, что промежутки прозрачны и через них вы видите следующий/предыдущий скользящий элемент. Одна идея состоит в том, чтобы сделать эти промежутки непрозрачными.
Например, вы можете добавить белый 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>например, когда вы щелкаете по правому слайду, изображения сбиваются, и первое изображение заполняет пробел примерно через 300 мс.
@NishargShah Думаю, для перехода попробуйте установить transition-timing-function: ease-in; на элемент карусели
Братан, я видел, как ты решил большую часть сложных вопросов CSS, и ты классный.
Я думаю, что самая большая проблема с таким подходом - это жестко закодированные «33,333%» перехода, которые не учитывают разрыв/маржу. Если вы используете calc(x% + gap) в качестве значения перехода, это работает хорошо.
Кроме того, чтобы учесть все контрольные точки начальной загрузки, которые изменяют количество видимых слайдов, вам необходимо добавить различные смещения перехода (например, смещение 20% для маленьких экранов и смещение 50% для больших экранов). Грубый пример такого подхода можно найти в следующем кодовая ручка.
Спасибо, братан, но сбой возникает, когда вы нажимаете на первый слайд, пробелы в изображении заполняются примерно через 300 мс.
Какой браузер вы используете? Для меня (Firefox) проблема решена. Кроме того, какая ширина области просмотра вызывает у вас проблему (поскольку может быть пограничный случай с определенной точкой останова начальной загрузки, которую мой пример не охватывает)
да, братан, у firefox есть полный вид, но не в хроме, пожалуйста, откройте в хроме и решите проблему
Я обновил codepen небольшим количеством css, чтобы заставить его вести себя в Chrome так же, как в Firefox — в основном изображения теперь сохраняют соотношение сторон, а на маленьких экранах карусель уменьшается независимо от естественных размеров изображения.
братан, еще кое-что, 3-е изображение обрезано окном, почему? можете ли вы решить это, bcz на моих изображениях ясно видно, что изображения вырезаны
Под «третьим изображением вырезано» я понимаю, что вы говорите, что на размерах экрана от 768 до 1200 пикселей в карусели отображаются только два изображения. Это связано с тем, что вы добавили к своим изображениям классы "col-md-6 col-xl-4", что означает, что каждый будет занимать 6 (из 12) столбцов на средних экранах и 4 столбца на очень больших экранах.
нет братан, выше 1200 пикселей третье изображение вырезается окном, я знаю о медиа-запросах и других вещах, которые вы сделали, но эта проблема другая
Давайте продолжить обсуждение в чате.
Я улучшил ваш фрагмент, добавив встроенный CSS с html. Проблема в порядке стилей, поэтому у вас нет такого же предварительного просмотра.