制作带有div的滑块

Question

我无法尝试为以下两个div创建Carousal /滑块。这是我的代码到目前为止，但还没有找到一个实现会自动每隔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

请使用引导旋转木马滑块（http://www.w3schools.com/bootstrap/bootstrap_carousel.asp）。它会自动每隔4到5秒水平滑动div。

Answer 2

嗨，你可以尝试像这样在这里，我已经使用引导传送带

// 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'); 
 

 
});

@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; 
 
}

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

Carousel Demo