Question

我无法为下面的两个div创建一个carousal / slider。到目前为止，这是我的代码，但是没有找到一个每4秒自动滑动div的实现。有人可以提供一些关于我应该在哪里寻求的帮助

幻灯片1

  <div class="row no-margin border-c2">
    <div class="col-md-12">
      <div class="col-md-7 large-body">
            <img src="/img/home_slider1.jpg">
      </div>                
      <div class="col-md-5 large-body" style="padding: 50px 0px;">
        <h2 class="clr-orange">Cars</h2>
      <p>Cars manufacturers...</p> 
        <a href="/inventory" class="find-out-more">Find More</a>
      </div> 
  </div>
</div>

幻灯片2

  <div class="row no-margin border-c2">
    <div class="col-md-12">
      <div class="col-md-7 large-body">
            <img src="/img/home_slider2.jpg">
      </div>                
      <div class="col-md-5 large-body" style="padding: 50px 0px;">
        <h2 class="clr-orange">CHANNEL</h2>
      <p>Channel provides manufacturers...</p> 
        <a href="/inventory" class="find-out-more">Find More</a>
      </div> 
  </div>
</div>

Answer 1

请使用此Bootstrap轮播滑块（http://www.w3schools.com/bootstrap/bootstrap_carousel.asp）。它会每隔4到5秒自动滑动div。

Answer 2

嗨，你可以尝试使用bootstrap carousel

的演示创建这里

＆＃13;

// invoke the carousel
$('#myCarousel').carousel({
  interval: 4000
});

/* SLIDE ON CLICK */ 

$('.carousel-linked-nav > li > a').click(function() {

    // grab href, remove pound sign, convert to number
    var item = Number($(this).attr('href').substring(1));

    // slide to number -1 (account for zero indexing)
    $('#myCarousel').carousel(item - 1);

    // remove current active class
    $('.carousel-linked-nav .active').removeClass('active');

    // add active class to just clicked on item
    $(this).parent().addClass('active');

    // don't follow the link
    return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

    // remove active class
    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

＆＃13;

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}

＆＃13;

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <div class="row no-margin border-c2">
          <div class="col-md-12">
            <div class="col-md-7 large-body">
              <img src="/img/home_slider1.jpg">
            </div>                
            <div class="col-md-5 large-body" style="padding: 50px 0px;position: relative;left: calc(50% - 55px);">
              <h2 class="clr-orange">Cars</h2>
              <p>Cars manufacturers...</p> 
              <a href="/inventory" class="find-out-more">Find More</a>
            </div> 
          </div>
        </div>
    </div>
    <div class="item">
        <div class="row no-margin border-c2">
          <div class="col-md-12">
            <div class="col-md-7 large-body">
              <img src="/img/home_slider2.jpg">
            </div>                
            <div class="col-md-5 large-body" style="padding: 50px 0px;position: relative;left: calc(50% - 55px);">
              <h2 class="clr-orange">CHANNEL</h2>
              <p>Channel provides manufacturers...</p> 
              <a href="/inventory" class="find-out-more">Find More</a>
            </div> 
          </div>
        </div>
    </div>    
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>  
</ol>

＆＃13;

Carousel Demo

使用div创建一个滑块

2 个答案: