多个引导程序转盘显示同一页面

Multiple bootstrap carousels same page

本文关键字：一页 显示 引导程序      更新时间：2023-09-26

目前我在一个页面上有3个引导程序转盘。

它们是由我无法控制的php循环生成的，因此id总是从carousel开始

所以我遇到的问题是，所有的转盘都从id="#carousel-1"开始，并控制href="#carousel-1"

当然，这不起作用，因为所有的旋转木马都会滚动第一个旋转木马。我意识到这不会起作用，所以我想添加

$('.second-block #carousel').attr("id","#carousel-2").find('.controls a').attr("href","#carousel-2");
$('.fourth-block #carousel').attr("id","#carousel-3").find('.controls a').attr("href","#carousel-3");

这个jquery可以解决这个问题，因为它将其他转盘的id更改为自己的，但不幸的是，这仍然只是第一个滑动转盘。有什么想法吗？

这是Codepen

您必须更改.carousel-control、.carousel的id元素。根据W3:

id属性

id属性指定其元素的唯一标识符（id）。这个在元素的主子树中的所有ID中，值必须是唯一的并且必须至少包含一个字符。该值不得包含任何空格字符。

检查此项：Jsfidle

$('.second-block').find(".carousel").attr("id", "carousel2");
$('.second-block').find('.carousel-control').attr("href", "#carousel2");
$('.third-block').find(".carousel").attr("id", "carousel3");
$('.third-block').find('.carousel-control').attr("href", "#carousel3");
相关文章：