极客教程如何在运行时改变Bootstrap Carousel的间隔
我们将学习如何使用bootstrap在运行时改变旋转木马的时间间隔。在这个例子中，我们将讨论多种方法。Bootstrap carousel是一个用JavaScript、CSS和动画构建的用于滑动浏览多个内容的幻灯片。它适用于文本、图像和自定义标记。它还包括上一个和下一个控件以及用于控制其运动的指示器。
方法1：我们可以通过使用每个旋转木马项目的数据间隔属性来控制动画。所给的例子是理解这个概念的最好例子。Data-interval属性用于设置两个旋转木马项目之间的间隔时间，其默认值为3000毫秒。
<html>
<head>
<!-- CSS only -->
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<title>geeksforgeeks</title>
</head>
<body style="width:70%;">
<div id="carouselExampleIndicators"
class="carousel slide" data-ride="carousel"
data-interval="100">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators"
data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators"
data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators"
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210223134821/gfg3.jpg"
alt="First slide">
</div>
<div class="carousel-item" id="image2">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
输出:
方法2：在这种方法中，我们将使用bootstrap API方法改变动画间隔。该方法需要一个参数作为单位为毫秒的间隔，即（1s=1000milisecond）。我们指定的时间间隔将改变所有旋转木马项目在运行时的动画时间。旋转木马函数中的Data-interval是用来设置两个图片幻灯片之间的时间。
语法
$('.carousel').carousel({
interval: time in millisecond
});
<html>
<head>
<!-- CSS only -->
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<title>geeksforgeeks</title>
</head>
<body style="width:70%;">
<div id="carouselExampleIndicators"
class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators"
data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators"
data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators"
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210223134821/gfg3.jpg"
alt="First slide">
</div>
<div class="carousel-item" id="image2">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
// Handle Bootstrap carousel slide event
$('.carousel').carousel({
interval: 100
});
</script>
</body>
</html>
输出:
方法3：我们可以通过使用data-attribute和javascript来设置数据间隔时间。这种方法和上面两种方法一样非常简单。在这个方法中，我们将选择旋转木马类的div，并通过使用attr()方法来改变属性。attr()方法是一个jquery方法，用于设置或返回所选元素的属性和值。当这个方法被用来返回值时，它返回第一个匹配的元素的值，如果它被用来设置属性的值，那么它设置一个或多个属性。
语法:
$('.carousel').attr(
"data-interval","interval that you want to set (in milisec)
");
<html>
<head>
<!-- CSS only -->
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<title>geeksforgeeks</title>
</head>
<body style="width: 70%;">
<div id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active">
</li>
<li data-target="#carouselExampleIndicators"
data-slide-to="1">
</li>
<li data-target="#carouselExampleIndicators"
data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
alt="Second slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100"
src=
"https://yt3.ggpht.com/ytc/AAUvwnjJqZG9PvGfC3GoV27UlohMeBLxyUdhs9hUbc-Agw=s900-c-k-c0x00ffffff-no-rj"
alt="First slide" />
</div>
<div class="carousel-item" id="image2">
<img class="d-block w-100"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Third slide" />
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
//handle Bootstrap carousel slide event
$(".carousel").attr("data-interval", "100");
</script>
</body>
</html>
输出
支持的浏览器:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari