Bootstrap 轮播动画
Bootstrap carousel animation
我正在尝试向 bootstrap 旋转木马添加一些简单的动画。
代码如下所示:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="img/form3-1.jpg" alt="Chania"></div>
<div class="item"><img src="img/form3-2.jpg" alt="Chania"></div>
<div class="item"><img src="img/form3-3.jpg" alt="Flower"></div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
我想做的是在 10 秒的时间内使活动幻灯片的比例从 1 变为 1.5。 css 如下:
#myCarousel .active > img{transform:scale(1.5); -webkit-transform: scale(1.5); -webkit-transition: -webkit-transform 10s ease-out;-moz-transition: -moz-transform 10s ease-out;transition: transform 10s ease-out;}
我知道 HTML 和 CSS 是正确的。
但是当页面加载时,出现的第一张幻灯片不会缩放,但是一旦更改了该幻灯片,其余的就可以正常工作。即使我再次回到第一张幻灯片,它也会再次起作用。我需要的是在第一次加载时修复第一张幻灯片的动画。
您的代码运行正常。 window load
时间active
class
为默认状态。作为默认状态,您将看不到 animation
.
我创建了代码片段并为停止轮播动画设置了 data-interval="false"
。加载完成后,如果您使用 left
和 right
轮播控件,您将看到动画。您的第一个 click
left
或 right
将成为第一张幻灯片。
Default state isn't first slide.
#myCarousel .active > img{
transform:scale(1.5);
-webkit-transform: scale(1.5);
-webkit-transition: -webkit-transform 10s ease-out;
-moz-transition: -moz-transform 10s ease-out;
transition: transform 10s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
<div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
<div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
希望对你有所帮助
Note: data-interval="false"
should be remove from production site if you want auto play. (Don't set data-interval="true"
for auto play).
您可以使用关键帧 - 只需使用您需要的动画
#myCarousel .active > img {
-webkit-animation: bummer 10s;
animation: bummer 10s;
-webkit-transform: scale(0,0);
transform: scale(0,0);
}
@-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1.5);
}
}
@keyframes bummer {
100% {
transform: scale(1.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
<div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
<div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
我正在尝试向 bootstrap 旋转木马添加一些简单的动画。 代码如下所示:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="img/form3-1.jpg" alt="Chania"></div>
<div class="item"><img src="img/form3-2.jpg" alt="Chania"></div>
<div class="item"><img src="img/form3-3.jpg" alt="Flower"></div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
我想做的是在 10 秒的时间内使活动幻灯片的比例从 1 变为 1.5。 css 如下:
#myCarousel .active > img{transform:scale(1.5); -webkit-transform: scale(1.5); -webkit-transition: -webkit-transform 10s ease-out;-moz-transition: -moz-transform 10s ease-out;transition: transform 10s ease-out;}
我知道 HTML 和 CSS 是正确的。 但是当页面加载时,出现的第一张幻灯片不会缩放,但是一旦更改了该幻灯片,其余的就可以正常工作。即使我再次回到第一张幻灯片,它也会再次起作用。我需要的是在第一次加载时修复第一张幻灯片的动画。
您的代码运行正常。 window load
时间active
class
为默认状态。作为默认状态,您将看不到 animation
.
我创建了代码片段并为停止轮播动画设置了 data-interval="false"
。加载完成后,如果您使用 left
和 right
轮播控件,您将看到动画。您的第一个 click
left
或 right
将成为第一张幻灯片。
Default state isn't first slide.
#myCarousel .active > img{
transform:scale(1.5);
-webkit-transform: scale(1.5);
-webkit-transition: -webkit-transform 10s ease-out;
-moz-transition: -moz-transform 10s ease-out;
transition: transform 10s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
<div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
<div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
希望对你有所帮助
Note:
data-interval="false"
should be remove from production site if you want auto play. (Don't setdata-interval="true"
for auto play).
您可以使用关键帧 - 只需使用您需要的动画
#myCarousel .active > img {
-webkit-animation: bummer 10s;
animation: bummer 10s;
-webkit-transform: scale(0,0);
transform: scale(0,0);
}
@-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1.5);
}
}
@keyframes bummer {
100% {
transform: scale(1.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
<div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
<div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>