Twitter bootstrap bootstrap multi-item carousel在bootply上工作,但在浏览器上不工作
嗨,我正在尝试制作一个多项目引导旋转木马,一次滑动一个项目。这正是bootply所做的。 当我在编辑器中复制粘贴代码,当然还有链接jquery和引导cdn时,旋转木马不会逐项滑动 知道为什么吗? 这是我的html:Twitter bootstrap bootstrap multi-item carousel在bootply上工作,但在浏览器上不工作,twitter-bootstrap,carousel,bootply,Twitter Bootstrap,Carousel,Bootply,嗨,我正在尝试制作一个多项目引导旋转木马,一次滑动一个项目。这正是bootply所做的。 当我在编辑器中复制粘贴代码,当然还有链接jquery和引导cdn时,旋转木马不会逐项滑动 知道为什么吗? 这是我的html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="styleshee
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script> -->
</head>
<body>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive" /></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js">
</script>
</body>
</html>
JS:
$('myCarousel')。carousel({
间隔时间:4000
})
$('.carousel.item')。每个(函数(){
var next=$(this.next();
如果(!next.length){
next=$(this.sibbines(':first');
}
next.children(':first child').clone().appendTo($(this));
对于(var i=0;i来说,BootstrapJS CDN似乎有问题。我在Chrome中看到了这个错误:
未能在资源“”的“完整性”属性中找到有效摘要,该资源的计算SHA-256完整性为“A783Hjykc5z+a+PH8BJRFLU5HE+lwZR+azVrLPZ45k=”。该资源已被阻止
因此,它不知道test.js中的$(…).carousel是什么。请从CDN中尝试最新版本的引导:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
我终于想出了如何让旋转木马在普通浏览器上一次滑动一个项目
1) 从html文件中,删除“幻灯片”,这样就可以了。这将阻止引导的默认旋转幻灯片
2) 包括来自的animate.css。
这将为您提供许多很酷的动画效果,以自定义您的旋转木马。
3) 在css文件中添加:
.item {
animation-name: slideInRight;
animation-duration: 1s;
}
4) 在animate.css文件中,将transform:translate3d(100%,0,0)更改为25%
您可以从animate.css中选择任何想要的动画效果
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script> -->
</head>
<body>
<div class="col-md-6 col-md-offset-3">
<div class="carousel row" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive" /></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js">
</script>
</body>
</html>
JS:
您好,它仍然不能与更新的引导cdn一起工作。我没有收到任何类似的javascript错误。它可以工作,但旋转木马不能像在bootply上那样一个接一个地滑动。我只是不明白为什么相同的代码可以在bootply上工作,而不能在常规浏览器上工作。
.item {
animation-name: slideInRight;
animation-duration: 1s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script> -->
</head>
<body>
<div class="col-md-6 col-md-offset-3">
<div class="carousel row" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive" /></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive" /></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js">
</script>
</body>
</html>
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next { left: 25%; }
.carousel-inner .prev { left: -25%; }
.carousel-control.right { right: -50px; }
.carousel-control.left { left: -50px; }
.carousel-control { width: 4%; }
.item {
animation-name: slideInRight;
animation-duration: 1s;
}
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 2000
});
});
$(document).ready(function(){
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}