css控制不管页面处于任何大小的状态下轮播图一直处于页面中间

不管页面处于任何大小的状态下轮播图一直处于页面中间

使用swiper实现轮播图

代码如下显示：

1. 页面效果图以下显示（页面无论如何变化slider2一直处于页面中间显示）
   

2. html代码

 <div class="shopswiper">
    <div class="swiper-container1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="first">
            <img src="static/image/left.png">
            <div>
              <p class="p">1</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="middle">
            <img src="static/image/center.png">
            <div>
              <p class="p">2</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="two">
            <img src="static/image/right.png">
            <div>
              <p class="p">3</p>
            </div>
          </div>
        </div>
      </div>
    </div>
   </div>

3. css代码

.shopswiper {
    width: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    min-width:520px;
}
.swiper-container1 {
    width: 1520px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -760px;
}
 .first,
 .middle,
 .two {
    position: relative;
    margin-top: 40px;
    width: 455px;
    height: 341px;
}
.first img,
.middle img,
.two img {
    width: 100%;
}
 .first div,
 .two div,
 .middle div {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 136px;
    height: 55px;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.5);
    line-height: 55px;
}

4. 轮播图js代码

//轮播图切换
var mySwiper1 = new Swiper('.swiper-container1', {
  loop: true,// 循环模式选项
  autoplay: {
    delay: 2000,
    disableOnInteraction: false
  },
  centeredSlides: true,
  pagination: {
    el: '.span',
    clickable: true
  },
  slidesPerView: 3,
  centeredSlides: true,
  centeredSlidesBounds: true
});

轮播图的部分样式没有给出来，轮播图图片大小间距样式布局看个人情况来制定。