无法在页面上居中 Slick Carousel

Question

我正在使用 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/

非常感谢您的帮助！

谢谢！

迈克

Answer 1

滑块上有一个 class“m-5”，将页边距设置为 3rem！重要。删除 class 似乎可以修复水平居中。如果需要 class，您可以通过 ID:

覆盖 CSS 中的边距

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

无法在页面上居中 Slick Carousel

Can't center Slick Carousel on page

javascript

css

bootstrap-4

slick.js