简体   繁体   中英

Twitter bootstrap carousel slideshow with js code

I want to make a slideshow of a bunch of js/css animation on a site. I am using bootstrap as a framework of it. The Carousel sounds like a built in function for slideshow in slideshow but seems like it is for images. Mine is js animation and I found hard time dealing with it. Is there better way doing it based on bootstrap framework?

This is Carousel in bootstrap:

<!--  Carousel - consult the Twitter Bootstrap docs at 
      http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
  <div class="carousel-inner">
    <div class="item active"><!-- class of active since it's the first item -->
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
  </div><!-- /.carousel-inner -->
  <!--  Next and Previous controls below
        href values must reference the id for this carousel -->
    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
</div><!-- /.carousel -->

What I am trying to do but messed things up:

You can use active the slider with $('.carousel').carousel(); and on each slide you can use your js/css effects with

$('.carousel').on('slide.bs.carousel', function () {
 // js function etc.
});

For example http://jsbin.com/kekocuha/1 , I used animate css for text animations for each slide, you can use your images js etc. like that too

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM