carousel - 如何在鼠标超过时使用按钮和更改幻灯片来制作罗马罗罗斯

  显示原文与译文双语对照的内容
0 0

我想做一个像这样的carrousel

链接

carousel 具有每个幻灯片内容的按钮,当移动鼠标到 carousel的任何按钮时,这里操作将更改幻灯片。

我使用 Bootstrap 3.2.0这就是我所拥有

HTML


 <div class="panel-body clearfix">
 <!-- LINKED NAV -->
 <div class="col-xs-12">
 <ol class="carousel-linked-nav pagination">
 <li class=""><a href="#1">4</a></li>
 <li class=""><a href="#2">3</a></li>
 <li class=""><a href="#3">2</a></li>
 <li class=""><a href="#4">1</a></li>
 </ol>
 </div>
 <div id="myCarousel" class="carousel slide">
 <!-- Carousel items -->
 <div class="carousel-inner">
 <div class="item">
 <a href="#">
 <img alt="" class=" img-responsive" src="<?= IMG. '4.jpg'?>">
 </a>
 </div>
 <div class="item">
 <a href="#">
 <img alt="" class=" img-responsive" src="<?= IMG. '3.jpg'?>">
 </a>
 </div>
 <div class="item">
 <a href="#">
 <img alt="" class=" img-responsive" src="<?= IMG. '2.jpg'?>">
 </a>
 </div>
 <div class="item active">
 <a href="#">
 <img alt="" class=" img-responsive" src="<?= IMG. '1.jpg'?>">
 </a>
 </div>
 </div>
 <!-- Carousel nav -->
 <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
 </div>
</div>

CSS


.carousel-indicators li{
 border: none;
 background-color: #888;
}
.carousel-indicators li.active{
 border: none;
 background-color: #4297d7;
}
#myCarousel {
 margin-top: 10px;
}
.carousel-linked-nav,. item img {
 display: inline; 
 margin: 0 auto;
}
.carousel-linked-nav {
 width: 120px;
 margin-bottom: 20px; 
}

JS


function carousel() {
 $('#myCarousel').carousel({
 interval: 3000
 });
 $('.carousel-linked-nav> li> a').click(function() {
 var item = Number($(this).attr('href').substring(1));
 $('#myCarousel').carousel(item - 1);
 $('.carousel-linked-nav. active').removeClass('active');
 $(this).parent().addClass('active');
 return false;
 });
 $('#myCarousel').bind('slid', function() {
 $('.carousel-linked-nav. active').removeClass('active');
 var idx = $('#myCarousel. item.active').index();
 $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
 });
}

我试图使 carousel 像链接,我不能,carousel 按钮使用这里的所有空间,当鼠标在按钮上更改幻灯片。

谢谢

时间: 原作者:

0 0

我解决了在js中添加这个


$('.carousel-linked-nav> li> a').mouseover(function() {
 var item = Number($(this).attr('href').substring(1));
 $('#myCarousel').carousel(item - 1);
 $('.carousel-linked-nav. active').removeClass('active');
 $(this).parent().addClass('active');
 return false;
 });

所以我的基本问题是,我不能让按钮使用 carousel 所有空间。 我的意思是 carousel的宽度和空间分布在它们之间。

原作者:
...