html代码

<div id="carousel-index" class="carousel slide carousel-fade" data-ride="carousel">
  
  <ol class="carousel-indicators">
    <li data-target="#carousel-index" data-slide-to="0" class=""></li>
    <li data-target="#carousel-index" data-slide-to="1" class="active"></li>
    <li data-target="#carousel-index" data-slide-to="2" class=""></li>
  </ol>

  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="images/index_02.jpg" alt="..."> 
    </div> 
    <div class="item active">
      <img src="images/index_02.jpg" alt="..."> 
    </div> 
    <div class="item">
      <img src="images/index_02.jpg" alt="..."> 
    </div> 
   
  
  </div>

  
</div>

左右切换效果改成淡入淡出效果的css

#carousel-index{ z-index:20; margin-bottom:2%;}
/* Bootstrap Carousel Fade Transition  start */
       .carousel-fade  .carousel-inner .item {
            transition-property: opacity;
        }

        .carousel-fade  .carousel-inner .item,
        .carousel-fade  .carousel-inner .active.left,
        .carousel-fade  .carousel-inner .active.right {
            opacity: 0;
        }

       .carousel-fade  .carousel-inner  .active,
       .carousel-fade  .carousel-inner  .next.left,
        .carousel-fade  .carousel-inner .prev.right {
            opacity: 1;
        }

       .carousel-fade  .carousel-inner  .next,
        .carousel-fade  .carousel-inner .prev,
        .carousel-fade  .carousel-inner .active.left,
        .carousel-fade  .carousel-inner .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
        }

   .carousel-fade .carousel-control {
        z-index: 2;
    }

/* Bootstrap Carousel Fade Transition end */

不改切换效果的话，则不需要以上代码

对应的css样式，可根据需要自行修改

     background-color:#999;
}


/*
* 	Owl Carousel Owl Demo Theme 
*	v1.3.3
*/

.owl-theme .owl-controls{
    margin-top: 10px;
    text-align: center;
}


.owl-theme .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color:#fff;
    border:1px solid #666;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    background-color: #f18200;
    border-color:#fff;
}

/* If PaginationNumbers is true */

左右切换的箭头，需要的话就把代码加进去，样式也可以自行修改

 <!-- Controls -->
<a class="left carousel-control" href="#carousel-index" role="button" data-slide="prev">
       <span class="sr-only">Previous</span>
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
     </a>
     <a class="right carousel-control" href="#carousel-index" role="button" data-slide="next">
       <span class="sr-only">Next</span>
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
     </a>

1、首先注意的部分是data-ride=”carousel”

默认使用Bootstrap的Carousel组件，只需要加上 data-ride=”carousel” 就可以实现自动播放了。无需使用初始化的js函数。所以，如果carousel不会自动播放，那么首先检查这个部分。这里还能加其他参数，比如是设置图片轮转的时间间隔。

代码：<div id=”carousel-ad” class=”carousel slide” data-ride=”carousel” data-interval=”2000″>

2、其实还有手动初始化carousel组件的方法

这个方法在Bootstrap 2.x就在使用，当 data-ride=”carousel” 这个方法不管用的时候，可以手动初始化一下。代码如下：

$(‘#carousel-ad’).carousel();

如果还想控制图片轮转的时间间隔，还有参数：

$(function(){
$(‘#carousel-ad’).carousel({
interval: 3000
});
});

如果设置不自动播放，还可以：

$(‘#carousel-ad’).carousel({
pause: true,
interval: false
});