无法在页面上居中 Slick Carousel

如何解决无法在页面上居中 Slick Carousel

我正在使用 Slick Carousel (slick.js)，但无法在页面上水平居中旋转木马。

HTML：

<!-- logo slider -->

<section id="customer-carousel" class="slider responsive container m-5">
  <div>
    <img src="/images/customers/eth_zuerich_logo.png" class="customer-slide">
  </div>
  <div class="text-center">
    <img src="/images/customers/kbsi_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/max-planck-institute-goettingen.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/nc_state_university_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/osaka_university_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/phoenixnmr_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/ruhr_universitaet_bochum_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/synex_medical_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/technical_university_of_brno_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/tu_ilmenau_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/tu_kaiserslautern_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/ucsb_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/UMD_logo.png" class="customer-slide">
  </div>
  <div>
    <img src="/images/customers/unh-logo.png" class="customer-slide">
  </div>
</section>


<!-- /logo slider -->

CSS：

#customer-carousel {
    width: 100%!important;
}

.customer-slide {
    width: 8rem;
    max-height: 10rem; 
    margin-left: auto;
    margin-right: auto;
}

JS：

(function ($) {
  'use strict';

  // Preloader js    
  $(window).on('load',function () {
    $('.preloader').fadeOut(100);
  });
  
  // Accordions
  $('.collapse').on('shown.bs.collapse',function () {
    $(this).parent().find('.ti-angle-right').removeClass('ti-angle-right').addClass('ti-angle-down');
  }).on('hidden.bs.collapse',function () {
    $(this).parent().find('.ti-angle-down').removeClass('ti-angle-down').addClass('ti-angle-right');
  });

  
    //slider
    $('.slider').slick({
        slidesToShow: 1,slidesToScroll: 1,autoplay: true,dots: true,arrows: false
    });

})(jQuery);

页面在此处上演，轮播就在主页上（客户徽标）： http://bridge12-staging.s3-website.us-east-2.amazonaws.com/

非常感谢您的帮助！

谢谢！

迈克

解决方法

滑块上的“m-5”类将边距设置为 3rem!important。删除该类似乎可以解决水平居中问题。如果需要该类，您可以通过 ID 覆盖 CSS 中的边距：

#customer-carousel {
    margin-left: auto!important;
    margin-right: auto!important;
}