Deep13 Deep13 - 4 years ago 282
HTML Question

how to create a image carousel with navigation arrows and a play/pause that changes on click

I am very new to web development..and trying to create a image slider using html5, css3 and JavaScript, with left and right navigation buttons and play/pause toggle that changes on click and the effect has to slide whether I click the navigation or the play/pause.

What I am trying is to slide the images in loop... So the images repeat endlessly.

I tried but not able to get it right... Is it possible to achieve this and also with customisable arrows and play/pause images?

Any resources and code will be a lot of help guys. I want to start from scratch.

Here is the javascript code where I am not able to repeat it endlessly

function onClickPrev(){
if (currentImage == 0){
slideTo(imageNumber - 1);
}
else{
slideTo(currentImage - 1);
}
}
function onClickNext(){
if (currentImage == imageNumber - 1){
slideTo(0);
}
else{
slideTo(currentImage + 1);
}
}


Also how would I add a custom play or pause image that changes on click and slides the images.

Answer Source

FYI:the fiddle has been changed as per the user requirement

http://jsfiddle.net/XFcSv/896/

<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">


  <!-- Items -->
  <div class="carousel-inner">

    <!-- Item 1 -->
    <div class="item active">
      <img src="http://lorempixel.com/1500/600/abstract/1" />
      <div class="container">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel Layout</h1>
          <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
          <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
          </p>
        </div>
      </div>
    </div>

    <!-- Item 2 -->
    <div class="item">
      <img src="http://lorempixel.com/1500/600/abstract/2" />
      <div class="container">
        <div class="carousel-caption">
          <h1>Changes to the Grid</h1>
          <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
          <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
        </div>
      </div>
    </div>

    <!-- Item 3 -->
    <div class="item">
      <img src="http://lorempixel.com/1500/600/abstract/3" />
      <div class="container">
        <div class="carousel-caption">
          <h1>Percentage-based sizing</h1>
          <p>With "mobile-first" there is now only one percentage-based grid.</p>
          <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#homeCarousel" 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="#homeCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <div id="carouselButtons">
    <button id="playButton" type="button" class="btn btn-default btn-xs">
      <span id="playSpan" class="glyphicon glyphicon-pause"></span>

    </button>
  </div>
</div>






<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
  About this SO Question: <a href='http://stackoverflow.com/q/20615100/1366033'>Add Play/Pause button to bootstrap carousel</a>
  <br/> Find documentation: <a href='http://getbootstrap.com/css/'>Get Bootstrap 3.0</a>
  <br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a>
  <br/>
  <div>


$(function() {
  $('#homeCarousel').carousel({
    interval: 2000,
    pause: "false"
  });
  $('#playButton').click(function() {
    if ($('#playSpan').hasClass("glyphicon glyphicon-play")) {
      $('#homeCarousel').carousel('cycle');
      $('#playSpan').removeClass('glyphicon glyphicon-play');
      $('#playSpan').addClass('glyphicon glyphicon-pause');
    } else {
      $('#homeCarousel').carousel('pause');
      $('#playSpan').removeClass('glyphicon glyphicon-pause');
      $('#playSpan').addClass('glyphicon glyphicon-play');
    }
  });

});


#carouselButtons {
  margin-left: 280px;
  position: absolute;
  bottom: 6px;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download