1
ブートストラップカルーセルに問題があります。各アイテムを1つずつ移動する必要があります。特定のアイテムを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));
}
});
ある
ありがとうございます。 – Shiladitya
ありがとうございました –
答えを受け入れてください。 :) – Shiladitya