多物品传送带-物品阴影

时间：2018-07-31 09:19:55

标签： css bootstrap-4 carousel

我的旋转木马中的阴影有问题。更换幻灯片时，将显示背面的阴影，从而使已经可见的幻灯片更富强度。我尝试在过渡的帮助下解决此问题，但没有帮助。我希望获得自由移动幻灯片而不重叠已经可见的幻灯片的效果。

$('#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>

2 个答案:

答案 0 :(得分：0)

嘿，我在此代码段中做了一些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>

答案 1 :(得分：0)

只需在您的img标签中添加css 

box-shadow:none !important;

您的B'coz正在使用transform: translateX(-16.66667%);

让我知道您是否需要进一步澄清。

  $('#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>

您只想添加新课程

.carousel-inner .carousel-item-left.active img,
.carousel-inner .carousel-item-prev img{
  box-shadow:none !important;
}
相关问题
最新问题