如何使滑块在台式机和手机上的显示效果相同

Question

我在桌面上有一个带有下图的滑块

这是根据需要，但是为什么当它更改为dektop版本时却变成这样

我将滑动滑块与JS一起使用

//slider kol
$(document).ready(function() {
  (function ($) {    
    //initialize swiper when document ready
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
                clickable: true,
                type: 'fraction',
            },
            slidesPerView: 2,
      spaceBetween: 5,
            centeredSlides: true,
            autoHeight:true,
    });
  })(jQuery);
});

这是php代码示例，我使用boostrap 4

  <!--text-->
  <div class="bg-text-kol">
      <div class="swiper-container swiper2" >
        <div class="swiper-wrapper">

          <div class="swiper-slide px-3 bg-text-kol2">
            <div class="text-left">
              </br>
              <h2 class="h5 mt-3"><?php echo $this->lang->line('kol_15_name'); ?></h2>
              <a href="<?php echo "https://www.instagram.com/".$this->lang->line('kol_15_ig') ?>" target="_blank"><?php echo '@'.$this->lang->line('kol_15_ig'); ?></a>
              <p class="mark-bold"><?php echo $this->lang->line('kol_15_title'); ?></p>
              <p class="mt-3"><?php echo $this->lang->line('kol_15_text'); ?></p>
              </br>
            </div>
          </div>
          </div>

      </div>
      <!-- Add Pagination
      <div class="swiper-pagination"></div>-->
    </div>
  </div>