css - 多元素轮播 - 元素阴影

Question

我的旋转木马中有阴影问题。当您更换幻灯片时，会显示背面的阴影，从而为已经可见的幻灯片提供强度。我试图在过渡的帮助下解决这个问题，但没有帮助。我想获得自由移动幻灯片而不与已经可见的幻灯片重叠的效果。

$('#feedPhotoCarousel').carousel({
  interval: 10000
})

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

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

    next.children(':first-child').clone().appendTo($(this));
  }
});

.carousel {
  margin-top: 1rem;
}

.carousel .carousel-item .content-item {
  padding: 13px;
}

.carousel .carousel-item .content-item img {
  box-shadow: 3px 3px 15px #a4abb5;
}


/* Multi Item Carousel */

.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(16.66667%);
}

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

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-10">

      <div id="feedPhotoCarousel" class="carousel slide w-100" data-ride="carousel">
        <div class="carousel-inner w-100" role="listbox">
          <div class="carousel-item active">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=1">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=2">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=3">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=4">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=5">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=6">
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#feedPhotoCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#feedPhotoCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

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

Answer 1

嘿，我在此代码段中做了一些 css 修改，现在它不会为已经可见的幻灯片提供阴影强度。

$('#feedPhotoCarousel').carousel({
  interval: 10000
})

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

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

    next.children(':first-child').clone().appendTo($(this));
  }
});

.carousel {
  margin-top: 1rem;
}

.carousel .carousel-item .content-item {
  padding: 13px;
}

.carousel .carousel-item .content-item img {
  box-shadow: 3px 3px 15px #a4abb5;
}


/* Multi Item Carousel */

.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(16.66667%);
}

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

.carousel-inner .carousel-item-left.active img,
.carousel-inner .carousel-item-prev img{
  box-shadow:none !important;
}

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-10">

      <div id="feedPhotoCarousel" class="carousel slide w-100" data-ride="carousel">
        <div class="carousel-inner w-100" role="listbox">
          <div class="carousel-item active">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=1">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=2">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=3">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=4">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=5">
            </div>
          </div>
          <div class="carousel-item">
            <div class="d-block col-2 content-item">
              <img class="img-fluid" src="http://placehold.it/350x180?text=6">
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#feedPhotoCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#feedPhotoCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

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