Boostrap博客网站搭建（三）-首页轮播图实现

1、使用轮播图插件

这里我们使用swiper.js插件并附上下载地址：https://pan.baidu.com/s/1c3MifM4   

下面就需要添加HTML代码了

  <div class="jumbotron container-slider">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./images/header-bg.jpg" width="100%"/></div>
        <div class="swiper-slide"><img src="./images/header-bg1.jpg" width="100%"/></div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
  </div>

然后自定义分页样式

.container-slider{
  margin-top: 60px;
  width: 100%;
  height: auto;
  padding: 0px;
}
.swiper-container {
  width: 100