How do I make my image carousel in html move between pictures by itself?

Question

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.

Answer 1

Add a data-autoplay="true" to <div class="fotorama" id='carousel'> like this: <div class="fotorama" id='carousel' data-autoplay="true">.

Answer 2

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 -->