Add a data-autoplay="true"
to <div class="fotorama" id='carousel'>
like this: <div class="fotorama" id='carousel' data-autoplay="true">
.
How do I make my image carousel in html move between pictures by itself?
题
So at the moment my image carousel only moves if it's moved by the user, but I'd like it so it also automatically flows between images. My current code is as follows:
<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- 33 KB -->
<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.1/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.1/fotorama.js"></script> <!-- 16 KB -->
<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama" id='carousel'>
<img src="images/carousel1.jpg">
<img src="images/carousel2.jpg">
<img src="images/carousel3.jpg">
<img src="images/carousel4.jpg">
</div>
Can anyone suggest what I should add to create the desired functionality? Thanks.
解决方案
其他提示
you can simply use the open source twitter bootstrap framework which includes many classes dealing with carousel . so you have to download bootstrap.min.css and carousel.css and bootstrap.min.js and jquery.min.js (latest version )
this is an example :
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<img src="images/header1.png" alt="First slide">
<div class="carousel-caption">
<h1>Enjoy yourself in oursite</h1>
<p><a class="btn btn-lg btn-primary" href="signup.html#inscription" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<img src="images/header2.png" alt="header2" >
<div class="carousel-caption">
<h1>See all our products in anytime you want </h1>
<p><a class="btn btn-lg btn-primary" href="menProducts.html#mi-slider" role="button">Browse gallery</a></p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<img src="images/header3.png"/>
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
不隶属于 StackOverflow