swiper 前后空白 问题求大神指点

实例化后左端有大块空白不是很清楚为什么，引了Boostrap，所以上完整代码求大神指点 ，学识浅薄欢迎大家指点

css~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/*equipment_state_wrapper*/

.equipment_state_wrapper {     padding: 10px;     display: flex;     background-color: #1146a2;     background: -webkit-linear-gradient(0deg,#1146a2 0%,#049ae7 50%, #1347ac 100%);     background: -webkit-linear-gradient(0deg,#1146a2 0%,#049ae7 50%, #1347ac 100%);     background: -o-linear-gradient(0deg,#1146a2 0%,#049ae7 50%, #1347ac 100%);     background: -moz-linear-gradient(0deg,#1146a2 0%,#049ae7 50%, #1347ac 100%);     background: linear-gradient(0deg,#1146a2 0%,#049ae7 50%, #1347ac 100%);     box-shadow: 0 3px 15px rgba(0, 0, 0, 0.35);     overflow: hidden; } .equipment_state_wrapper .equipment_wrapper {     flex: 6;     display: flex;     background: #fff;     padding: 10px;     border-radius: 10px;     overflow: hidden;     position: relative;     height: 120px; } .equipment_state_wrapper .equipment_data_down_wrapper {     flex:2; }

 

html~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<div class="equipment_state_wrapper m-b" style="display: block;"> <!-- Swiper --> <div class="equipment_wrapper_c" style="display: flex;"> <div class="equipment_wrapper"> <div class="swiper-container-wrapper swiper-pagination"> <!--<div class="swiper-button-next"></div>--> <!--<div class="swiper-button-prev"></div>--> <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> </div> </div> </div> </div> <div class="equipment_data_down_wrapper"> <div class="text-center down_data_wrapper"> <a href="javascript:void(0);" class="btn down_data_btn">数据下载</a> </div> <div class="error_wrapper"> <div class="error_text">更换报警</div> <div class="error_img_wrapper"> <img src="../image/error_icon.gif" alt="" class="error_img" /> </div> </div> </div> </div> </div> <div class="demo hide"> <div class="swiper-slide-demo"> <div class="swiper-slide" data-id="#id#" data-name="#name#"> <img src="#src#" alt="" class="swiper-slide-img"/> </div> </div> </div>

js~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

$.each(this_json, function (i, o) { var this_str = $('.swiper-slide-demo').html(); this_str = this_str.replace(new RegExp('#id#', 'gm'), o.id); this_str = this_str.replace(new RegExp('#name#', 'gm'), o.name); this_str = this_str.replace(new RegExp('#src#', 'gm'), o.src); $('.gallery-top.swiper-container .swiper-wrapper').append(this_str); }); var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 4, centeredSlides: true, loopAdditionalSlides: 100, paginationClickable: true, spaceBetween: 30, grabCursor: true, keyboardControl: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on: { slideChangeTransitionEnd: function(){ if(this.isEnd){ this.navigation.$nextEl.css('display','none'); }else{ this.navigation.$nextEl.css('display','block'); } }, }, }); /*前后有空白所以修改初始位置*/ $('.swiper-wrapper').css({'transform': 'translate3d(0px, 0px, 0px)'});