解决了第一个滑块我更改了名称:carousel-example-generic to carousel-example-generic_1来区分并解决了我的问题
我在我的主页上使用2个引导滑块,问题是主0slider工作正常,但当我点击第二个滑块的左或右箭头也滑动第一个滑块的图像,所以有人请指导我如何修复它我的代码是这样的
<!-- Wrapper for slides --> <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
<!-- Wrapper for slides --> <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时,请务必更新相关控件。
因此,如果以下代码适用于一个滑块:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <!-- Wrapper for slides --> <!-- Controls --> </div>对于另一张幻灯片,您应该具有不同的ID,例如: id="carousel-example-generic2" 。
请记住,您应该使用更相关的名称,例如:“news-carousel”或“main-slideshow”。
如果您在滑块中有controls ,请确保更新href值,以便它们指向相关滑块。
<!-- Controls --> <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:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <!-- Wrapper for slides --> <!-- Controls --> </div>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.
<!-- Controls --> <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>更多推荐
发布评论