如何在轮播滑块中的图像之间添加间隙或在滑动时消除故障 [英] How to add gap between images in carousel slider or remove glitch when slide

查看：13
本文介绍了如何在轮播滑块中的图像之间添加间隙或在滑动时消除故障的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我参考此链接制作了一个轮播图，最初发布在此link 但不幸的是，我不想在第一张图片中填充.所以我删除了第一张图片的填充，但这会导致图片的宽度变大.

所以我删除了所有图像中的填充，并为间隙添加了 margin-left

.carousel-item img {填充:0；右边距:1rem；/* 用于间隙 */}

但是当我滑动它时会产生某种类型的故障.

是否有在图像之间添加间隙的解决方案(不是第一张和最后一张图像)?

Codepen 链接:https://codepen.io/Nisharg/pen/qwajmx

$('#travelCarousel').carousel({间隔:假});$('#travelCarousel.carousel .carousel-item').each(function(){让下一个 = $(this).next();如果(！下一个长度){next = $(this).siblings(':first');}next.children(':first-child').clone().appendTo($(this));for (让 i=0;i<3;i++) {next=next.next();如果(！下一个长度){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"><风格>.carousel-item img {填充:0；右边距:1rem；/* 用于间隙 */}.carousel-inner .carousel-item.active,.carousel-inner .carousel-item-next,.carousel-inner .carousel-item-prev {显示:弹性；}.carousel-inner .carousel-item-right.active,.carousel-inner .carousel-item-next {变换:translateX(33.33333333%)；}.carousel-inner .carousel-item-left.active,.carousel-inner .carousel-item-prev {变换:translateX(-33.33333333%);}.carousel-inner .carousel-item-right,.carousel-inner .carousel-item-left {变换:translateX(0);}</风格><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 class="carousel-item"><img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=2" alt="img-2">

<div class="carousel-item"><img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=3" alt="img-3">

<div class="carousel-item"><img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=4" alt="img-4">

<div class="carousel-item"><img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=5" alt="img-5">

<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＞

<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.

解决方案

我认为这种方法的最大问题是硬编码的33.333%"转换没有考虑间隙/边距.如果您使用 calc(x% + gap) 作为过渡值，效果会很好.

此外，为了适应所有改变可见幻灯片数量的引导断点，您需要添加不同的过渡偏移(例如，小屏幕为 20% 的偏移量，大屏幕为 50% 的偏移量).可以在以下 codepen 中找到这种方法的粗略示例.

I made a carousel with reference of this link and originally posted on this link but unfortunately, I want no padding in first image. So I removed padding of first image but that create big width of image.

So I removed padding in all images and for gap I added margin-left

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

but that created some type of glitch when I slide it.

Is there a solution for adding gap between images (not in first and last image)?

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>

I don't want to use any third-party JS library like Slick.js.

解决方案

I think the biggest problem with such approach is the hard-coded "33.333%" of transition that does not take the gap/margin into account. If you use calc(x% + gap) as the value for the transition, it works well.

Additionally, to accommodate all bootstrap breakpoints that change the amount of visible slides, you need to add different transition offsets (e.g. 20% offset for small screens and 50% offset for big screens). A rough example of such approach can be found in the following codepen.

这篇关于如何在轮播滑块中的图像之间添加间隙或在滑动时消除故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆