我正在使用HTML代码和CSS的引导滑块。 BUt幻灯片不会自动或手动更改。 下面是滑块的代码。
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval:3000,
pause: "false"
});
})(jQuery);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item active slide1">
<div class="row">
<div class="container">
<div class="col-md-3 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/pfmmo6qj1/window_domain.png">
</div>
<div class="col-md-9 text-left">
<h3 data-animation="animated bounceInDown">Add images, or even your logo!</h3>
<h4 data-animation="animated bounceInUp">Easily use stunning effects</h4>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item slide2">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown"> 50 animation options A beautiful</h3>
<h4 data-animation="animated bounceInUp">Create beautiful slideshows </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/sp11uneml/rack_server_unlock.png">
</div>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item slide3">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Simple Bootstrap Carousel</h3>
<h4 data-animation="animated bounceInUp">Bootstrap Image Carousel Slider with Animate.css</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
</div>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="item slide4">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">We are creative</h3>
<h4 data-animation="animated bounceInUp">Get start your next awesome project</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
</div>
</div>
</div>
</div>
<!-- End Item 4 -->
</div>
<!-- End Wrapper for slides-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
答案 0 :(得分：0)
<!doctype html>
<html ng-app="plunker" >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"> </script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="app.js"></script>
<!-- adding css files -->
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="CarouselCtrl">
<div class="offsetspan6">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img class="image-circle" ng-src="{{slide.image}}" style="margin:auto;"/>
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//angular.module('myApp', ['ui.bootstrap']);
var app = angular.module('plunker', ['ui.bootstrap']);
// Controller for Carousel
function CarouselCtrl($scope) {
// initializing the time Interval
$scope.myInterval = 1000;
// Initializing slide rray
$scope.slides = [
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Cute Fish'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Image2'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Swordtail%20PIX/Xiphophorus%20helleriAQ%20Hifin%20Black%20males.jpg',text:'Image3'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Image4'}
];
var slides = $scope.slides;
console.log(slides);
} // Controller Ends here
</script>
</html>