1
我的自举圆盘传送带有问题，它应该逐个移动每个物品，当我将鼠标悬停在特定物品上时，只有该物品应具有悬停效应不是全部在父div内。我想在BootStrap Carousel的悬停物品上滑动并悬停1分钟效果
我使用了一些来自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));
}
});
任何和所有帮助将不胜感激预先感谢您
可能是https://jsfiddle.net/71tg1mwn/4/会帮助你... – Shiladitya
非常感谢你 –
请接受答案。 :) – Shiladitya