Having an issue with centering the Slick Carousel horizontally on my page, can you help?
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);
The page is staged here & the carousel is right on the home page (customer logos):
Your assistance would be greatly appreciated!
Thank you!
Michael