Swiper实现两种常用轮播图

效果图：

市面上实现的网页中的轮播图大多都是用Swiper实现的，主要就是这两种，其实没必要写这篇的，写这篇的目的.....emmm.....方便以后伸手使用和练习两个swiper......别打我。。

html：

css：

/*----------------------轮播图公共样式层-----------------------*/
.lunbo-leave {
    
}
.swiper-imagesize {
    max-width: 1280px;
    width: 100%;
    min-width: 1100px;
    /*height: 700px;*/
}
.swiper-wrapper {
    max-width: 1280px;
    width: 100%;
    min-width: 1100px;
    /*height: 700px;*/
}
.swiper-pagination-bullet-active {
    background-color: #A0100F;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
/*------------------------轮播图1层---------------------------*/
.swiper1-container {
    max-width: 1280px;
    width: 100%;
    min-width: 1100px;
    /*height: 700px;*/
}
/*------------------------轮播图2层---------------------------*/
.swiper2-container {
    max-width: 1280px;
    width: 100%;
    min-width: 1100px;
    /*height: 700px;*/
}

js：

var swiper1 = new Swiper('.swiper1-container', { // 区分容器
    centeredSlides: true,
    loop: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-p1',
      clickable: true,
    },

});
var swiper2 = new Swiper('.swiper2-container', { // 区分容器
    effect: 'fade',
    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-p2',
      clickable: true,
    },

});

素材包：click here