停止bootstrap carousel下一个上一个按钮工作在外部div单击
在停止bootstrap carousel下一个上一个按钮工作在外部div单击的情况下，可以通过以下步骤来解决问题：
- 确保正确引入了Bootstrap的相关文件，包括CSS和JavaScript文件。
- 在外部div的点击事件中，通过JavaScript代码来控制carousel的切换。可以使用Bootstrap提供的Carousel插件的方法来实现。
- 首先，给外部div添加一个点击事件的监听器，可以使用jQuery的
click()方法或者原生JavaScript的addEventListener()方法。 - 在点击事件的处理函数中，通过选择carousel的元素，使用Bootstrap Carousel插件提供的方法来切换到下一个或上一个slide。可以使用
carousel('next')方法来切换到下一个slide，使用carousel('prev')方法来切换到上一个slide。 - 如果需要在点击事件中停止carousel的自动播放，可以使用
carousel('pause')方法来暂停自动播放。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Stop Bootstrap Carousel Next/Prev Buttons from Working on External Div Click</title>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Image 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="Image 3">
</div>
</div>
</div>
<div id="externalDiv">
<button id="prevButton">Previous</button>
<button id="nextButton">Next</button>
</div>
<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 点击事件处理函数
document.getElementById('externalDiv').addEventListener('click', function(event) {
// 判断点击的是哪个按钮
if (event.target.id === 'prevButton') {
// 切换到上一个slide
document.getElementById('carouselExample').carousel('prev');
} else if (event.target.id === 'nextButton') {
// 切换到下一个slide
document.getElementById('carouselExample').carousel('next');
}
});
</script>
</body>
</html>在上面的示例代码中，我们给外部div添加了id为externalDiv，并在其中放置了两个按钮，分别有id为prevButton和nextButton。通过JavaScript代码，监听了外部div的点击事件，并根据点击的按钮来切换carousel的slide。
请注意，上述示例代码中使用的是Bootstrap 5版本的CSS和JavaScript文件，如果你使用的是其他版本的Bootstrap，请相应地修改引入的文件路径。
此外，腾讯云提供了一系列与云计算相关的产品和服务，可以根据具体需求选择适合的产品。具体产品介绍和相关链接地址，请参考腾讯云官方网站。
相关·内容
这是旋转木马的代码当我点击下面的div carousel时，就会像往常一样移动<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/
浏览 0提问于2016-08-11得票数 2
回答已采纳
我在引导旋转木马的工作中遇到了以下问题：
<div class="c-wrapper">
<div</e
浏览 14提问于2021-12-11得票数 1
我复制了代码和所有东西，但是next按钮在滑块之外。正在运行的代码在这里： (如果您看到)，现在右边的箭头(next按钮)在图像之外。我试着把一个div放在行中，一个div放在span6或8中，但是没有工作。-- Carousel items --> <div class="span8">
浏览 2提问于2013-06-25得票数 0
我使用bootstrap carousel。默认情况下启用循环图像。我已经通过interval: false禁用了。功能完美，但当我单击上一个和下一个按钮从一个图像移动到另一个图像时，似乎循环又被重新激活了。我不希望这样的事情发生。在页面上加载了几个旋转木马。每个图像都带有一组来自数据库的图像。每个carousel对于该carousel的每个调用都有唯一的id和href按钮，因此每个都是独立的。虽然它们都与类具有相同
浏览 0提问于2013-01-14得票数 0
我正在尝试在Bootstrap 4中创建一个carousel，其中我在carousel项中有一个next按钮。我想要移动到下一个轮播时，我在这个click按钮。<div class="container">
<div id="carouselExampleIndicators" class="carousel slide&quo
浏览 22提问于2019-02-22得票数 0
回答已采纳
我正在使用bootstrap 4 carousel。我正在尝试更改下一个和上一个按钮的位置，使其位于右上角，但彼此靠近。我已经做到了这一点，但我认为我在css代码中犯了一个错误，因为当我最小化屏幕时，我看不到按钮。Html代码 <div id="featured" class="carousel slide" data-ride="carousel"&
浏览 21提问于2020-09-27得票数 0
回答已采纳
我正在从头开始构建一个carousel，我想知道如何将“当前”类(以更改颜色)添加到同时使carousel更改(在主carousel div之外)的链接列表中。我不知道如何知道当单击next或previous按钮时要更新哪个数字LI。
例如，假设当前图像是10个图像中的第4个。我怎样才能让它更新第三个链接，如果上一个按钮被点击，或第五个链接，如果下一个按钮被点击？
浏览 1提问于2011-04-28得票数 1
回答已采纳
我在一个正在编写的页面中使用了，不幸的是，我还不能将其作为示例分享。但对于我的问题来说，这并不重要，因为我的问题不是bug，这是一个功能存在的查询。我已经在创建时启用了'auto‘，但我希望能够在用户单击其中一个导航按钮时动态禁用它。下面是旋转木马的创建过程： visible: 2, speed: 700window.landing.generat
浏览 0提问于2012-05-26得票数 0
我想要创建一个旋转旋转的div角，它是动态创建的ng重复表/其他div在每个表。到目前为止，我已经能够创造出如图所示的旋转木马，
就像这样：
浏览 2提问于2015-11-16得票数 1
回答已采纳
1回答
但是当视频加载时，相应的播放按钮充当旋转木马的左指示符。视频也是自动播放的。我也尝试使用标签，这停止了自动播放，但仍然发挥了旋转木马左指示器的播放按钮。提前谢谢。 <div class="modal-dialog" style="margin-top:250px;&qu
浏览 4提问于2015-11-09得票数 1
回答已采纳
1回答
引导转盘未正确对齐项目
、、、、
我对css和bootstrap比较陌生，我正在尝试在我的angular web应用程序中实现一个旋转木马。我从bootstrap站点复制了源代码，但在正确对齐所有内容时遇到了很多困难。此外，图像幻灯片似乎也不能很好地工作-当我单击上一个或下一个箭头时，页面会重新加载，它会转到/#carouselExampleIndicators。 ? <div id="carouselExampleIndicators" cl
浏览 52提问于2020-09-24得票数 0
2回答
加载第二个图像后，Carousel尝试移动到第三个项目(没有)，carousel就消失了。在趣味之后，旋转木马返回了第一张图像。 <div class=&qu
浏览 3提问于2012-12-31得票数 3
1回答
我已经尝试添加引导转盘到我的magento网站，它也工作，但问题是我看不到导航箭头。我的代码：<div id="myCarousel" class="carousel slide" data-ride="carousel"><ol class="carousel-in
浏览 2提问于2016-11-05得票数 0
我在Carousel Bootstrap中缩小图像的宽度时遇到了麻烦，因为每个图像都有一个固定的导航栏。每当我在Carousel中调整每个图像的大小时，Carousel控件上一个/下一个图标的位置也会改变。例如，我希望每个图像都有这样的图像宽度大小，其中我可以看到Carousel控件/上一个/下一个图标： ? 但由于某些原因，其他照片会被放大，这使得图像像这样伸
浏览 18提问于2020-11-22得票数 0
我的视图中有一个视图组件，当它加载一次时，它会正常工作。这个视图是幻灯片的一部分，所以上面有按钮。当用户单击next按钮时，它会创建一个重复的外部div标记。现在，对于这两个具有相同ID的div，我的css不能正常工作。任何帮助都将不胜感激。class="mx-auto contentblock">
<a cla
浏览 8提问于2022-03-28得票数 0
回答已采纳
我是从我的网站上的数据库动态显示卡滑块，这是工作。我正在使用下面的代码卡滑块。| | | 现在我要做的是，当用户点击任何卡时，弹出窗口将与相应的细节以及上一个和下一个按钮一起打开对于弹出，我使用一个引导4模式代码，并添加了引导旋转木马滑块代码，以便我可以检查下一个和以前的卡详细信息。>
</<em
浏览 0提问于2020-08-20得票数 1
回答已采纳
基本上，在我的旋转木马，在一些幻灯片，我有下降按钮，点击它，我想删除/删除该幻灯片，并导航到下一个幻灯片。可以使用JQuery吗？我在也尝试过类似的方法 $carouselItems = $('.item', $carousel);
$carousel.on('slid.bs.carousel&#x
浏览 1提问于2015-10-05得票数 3
回答已采纳
4回答
我正在将一个应用程序转换为Bootstrap 3，下面是我的示例旋转木马页面的完整代码。是的，在加载jQuery之前，我已经加载了Bootstrap.js。不管出于什么原因，旋转木马根本无法工作。具体而言:前一个/下一个按钮不工作，旋转木马不会自动滑到下一个幻灯片。="img/Carousel/001.jpg">
</div</em
浏览 10提问于2013-08-07得票数 10
回答已采纳
我试着让twitter bootstrap carousel工作，现在一切都很好，除了不能正常工作的指示器，当我按下下一个箭头时，指示器直接跳到第三个而不是第二个，当我单击上一个箭头返回时，图像完全消失了在我的例子中，我将一个div z-index放在滑块的顶部，以达到块不在其上移动的效果。<div id="myCarousel" class="carousel
浏览 0提问于2013-04-12得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
