javascript - 我想要在 BootStrap Carousel 中的悬停元素上实现 1 x 1 滑动和悬停效果

Question

我的引导轮播有问题，它应该逐个移动每个元素，当我将鼠标悬停在特定元素上时，只有该元素应该具有悬停效果，而不是全部在父 div 内。

我使用了 bootsnipp 的一些代码并对其进行了修改以满足我的需要，但遇到了这个问题。

这是我的 HTML

<div>
        <div class="col-md-12 text-center">
    <h3 class="">Tea Collections</h3>
</div>
<div class="col-md-12 col-md-offset-0">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="col-md-3"><a href="#"><img src="/image/assets/aces.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Asseccories</h4>
<div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>
                </div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="/image/assets/black_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Black Tea</h4>
<div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>                </div>
            </div>
            <div class="item">
                <div class="col-md-3">              <a href="#"><img src="/image/assets/white_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">White Tea</h4>
<div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>                </div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="/image/assets/puer_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Pu'er Tea</h4>
<div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>                </div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="/image/assets/green_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Green Tea</h4>
<div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>                </div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="/image/assets/herbal_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Herbal Tea</h4>
<div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>                </div>
            </div>
        </div>     </div>
</div></div>

这是我的 CSS

/*======Slider======*/
.decore {
    background-image: url(http://www.chaishop.online/image/assets/border2olive.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
}
.item:hover .decore {
    background-image: url(http://www.chaishop.online/image/assets/border2.png);
        transition: 2s;
}
.carousel-inner .active.left { left: -25% !important; }
.carousel-inner .active.right { left: 25% !important; }
.carousel-inner .next        { left:  25% !important; }
.carousel-inner .prev    { left: -25% !important; }



.carousel-control {
    display: block;
    width: 60px;
    height: 100%;
    font-size: 100px;
    background: rgba(0, 0, 0, 0);
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
    line-height: 2;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0 !important;
    opacity: 0 !important;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; }

.carousel-fade .carousel-control { z-index: 2; }

最后是我的 JS

//Slider
$(function() {
        $('.carousel').carousel({
            pause: "hover", // init without autoplay (optional)
            interval: 4000, // do not autoplay after sliding (optional)
            wrap: true // do not loop
        });
        // left control hide
        //$('.carousel').children('.left.carousel-control').hide();
    });
$('.carousel').on('slid.bs.carousel', function() {
        var carouselData = $(this).data('bs.carousel');
        var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
        $(this).children('.carousel-control').show();
        if (currentIndex == 0) {
            $(this).children('.left.carousel-control').fadeOut();
        } else if (currentIndex + 1 == carouselData.$items.length) {
            $(this).children('.right.carousel-control').fadeOut();
        }
    });



$('.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<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

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

任何和所有的帮助将非常感谢您提前致谢

Answer 1

这里有一个解决方案 https://jsfiddle.net/71tg1mwn/2/

//Slider
$(function() {
  $('.carousel').carousel({
      pause: "hover", // init without autoplay (optional)
      interval: 4000, // do not autoplay after sliding (optional)
      wrap: true // do not loop
  });
        
  $('.carousel').on('slid.bs.carousel', function() {
    var carouselData = $(this).data('bs.carousel');
    var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
    $(this).children('.carousel-control').show();
    if (currentIndex == 0) {
        $(this).children('.left.carousel-control').fadeOut();
    } else if (currentIndex + 1 == carouselData.$items.length) {
        $(this).children('.right.carousel-control').fadeOut();
    }
  });
  
  
});

/*======Slider======*/
.decore {
    background-image: url(http://www.chaishop.online/image/assets/border2olive.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
}
.item:hover .decore {
    background-image: url(http://www.chaishop.online/image/assets/border2.png);
        transition: 2s;
}
.carousel-inner .active.left { left: -25% !important; }
.carousel-inner .active.right { left: 25% !important; }
.carousel-inner .next        { left:  25% !important; }
.carousel-inner .prev    { left: -25% !important; }



.carousel-control {
    display: block;
    width: 60px;
    height: 100%;
    font-size: 100px;
    background: rgba(0, 0, 0, 0);
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
    line-height: 2;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0 !important;
    opacity: 0 !important;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; }

.carousel-fade .carousel-control { z-index: 2; }

.item-container:hover{
  box-shadow: inset 0px 0px 15px #888888;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">
      <h3 class="">Tea Collections</h3>
    </div>
    <div class="col-md-12 col-md-offset-0">
      <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-md-3 item-container">
              <a href="#"><img src="/image/assets/aces.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Asseccories</h4>
              <div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>
          
          <div class="item">
            <div class="col-md-3 item-container">
              <a href="#"><img src="/image/assets/black_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Black Tea</h4>
              <div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>
          
          <div class="item">
            <div class="col-md-3 item-container">
              <a href="#"><img src="/image/assets/white_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">White Tea</h4>
              <div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>
          
          <div class="item">
            <div class="col-md-3 item-container">
              <a href="#"><img src="/image/assets/puer_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Pu'er Tea</h4>
              <div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>
          
          <div class="item">
            <div class="col-md-3 item-container">
              <a href="#"><img src="/image/assets/green_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Green Tea</h4>
              <div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>
            </div>
          </div>
          
          <div class="item">
            <div class="col-md-3 item-container">
              <a href="#"><img src="/image/assets/herbal_tea.jpg" class="img-responsive center-block"></a>
              <h4 class="text-center">Herbal Tea</h4>
              <div class="decore"></div>
              <h5 class="text-center">4000,00 RSD</h5>                  
            </div>
          </div>
        </div>     
      </div>
    </div>
  </div>
</div>

希望这对您有帮助。