Seeking assistance – I managed to insert this logo slider onto my page. It seems to be functioning properly, but due to the width settings of the website engine, the modules are not fully stretching across the page.
In an attempt to make the slider cover the entire width of the screen, I used the following code:
customcontent5 > div.module-body { overflow: visible;}
However, this adjustment caused the slider to extend beyond the screen boundaries, forcing the page to automatically scroll with the movement of the slider. How can I resize the slider to fit the width of the page instead of conforming to the default narrow layout where all other modules reside?
Your help is much appreciated,
Code:
$(document).ready(function() {
$('.customer-logos').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 3
}
}]
});
});/* Slider */
.slick-slide {
margin: 0!important;
}
.slick-slide img {
width: 85%;
height: 85%;
display: block;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
user-select: none;
touch-callout: none;
touch-action: pan-y;
tap-highlight-color: transparent;
margin: 0!important;
max-width: 990px!important;
}
.slick-list {
position: relative;
display: block;
overflow: visible;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
right: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}<div class="container">
<section class="customer-logos slider">
<div class="slide"><img src="images/image1.png"></div>
<div class="slide"><img src="images/image2.png"></div>
<div class="slide"><img src="images/image3.png"></div>
<div class="slide"><img src="images/image4.png"></div>
<div class="slide"><img src="images/image5.png"></div>
<div class="slide"><img src="images/image6.png"></div>
<div class="slide"><img src="images/image7.png"></div>
<div class="slide"><img src="images/image8.png"></div>
</section>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">