Bootstrap 3.0：在主页上添加了2个滑块，两者都有冲突(Bootstrap 3.0 : added 2 sliders to home page both conflicting)

解决了第一个滑块我更改了名称：carousel-example-generic to carousel-example-generic_1来区分并解决了我的问题

我在我的主页上使用2个引导滑块，问题是主0slider工作正常，但当我点击第二个滑块的左或右箭头也滑动第一个滑块的图像，所以有人请指导我如何修复它我的代码是这样的

<div class="carousel-inner rightslider" role="listbox" > <div class="item active"> <div align="middle"> <img src="http://img6a.flixcart.com/image/iron/y/c/t/pigeon-favourite-750-w-favourite-750-w-400x400-imadzkdzyqx6yd9r.jpeg" width="80%" height="100" alt="" title="" border="0"> </div> <div align="middle" class="coupon_title"> <a class="coupon_title" href="http://aaa.php?id=8&c=65" target="_blank"><b>Pigeon Favourite 750 W Dry Iron</b></a> </div> <div class="coupon_price" align="middle"> <div class="price-old">₹645</div> <div class="price-new">₹399</div> </div> <div class="text-center"> <a class="btn btn-default " href="">Use Coupon <span class="glyphicon glyphicon-shopping-cart"></span> </a> </div><br> </div>

Solved For first slider i changed name :carousel-example-generic to carousel-example-generic_1 to differentiate and that solved my problem

i am using 2 bootstrap sliders on my home page , problem is that main 0slider is working fine but when i click left or right arrow for second slider that also slides images for first slider , so will someone please guide me how do i fix it my code is like this

<div class="carousel-inner rightslider" role="listbox" > <div class="item active"> <div align="middle"> <img src="http://img6a.flixcart.com/image/iron/y/c/t/pigeon-favourite-750-w-favourite-750-w-400x400-imadzkdzyqx6yd9r.jpeg" width="80%" height="100" alt="" title="" border="0"> </div> <div align="middle" class="coupon_title"> <a class="coupon_title" href="http://aaa.php?id=8&c=65" target="_blank"><b>Pigeon Favourite 750 W Dry Iron</b></a> </div> <div class="coupon_price" align="middle"> <div class="price-old">₹645</div> <div class="price-new">₹399</div> </div> <div class="text-center"> <a class="btn btn-default " href="">Use Coupon <span class="glyphicon glyphicon-shopping-cart"></span> </a> </div><br> </div>

最满意答案

根据slider's component usage的getbootstrap手册：

转盘需要在最外面的容器（.carousel）上使用id来使转盘控件正常工作。添加多个轮播时，或更改轮播的ID时，请务必更新相关控件。

因此，如果以下代码适用于一个滑块：

对于另一张幻灯片，您应该具有不同的ID，例如： id="carousel-example-generic2" 。

请记住，您应该使用更相关的名称，例如：“news-carousel”或“main-slideshow”。

如果您在滑块中有controls ，请确保更新href值，以便它们指向相关滑块。

<a class="left carousel-control" href="#carousel-example-generic" [<--] role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" [<--] role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>

According to the getbootstrap manual for the slider's component usage:

Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.

So, if the following code is for one slider:

For the other slide, you should have a different id, for instance: id="carousel-example-generic2".

Take in mind that you should use a more relevant name, for instance: "news-carousel" or "main-slideshow".

In case you're having controls in your slider, be sure you're updating the href values so they'll point to the relevant slider.

<a class="left carousel-control" href="#carousel-example-generic" [<--] role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" [<--] role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>

更多推荐