I'm currently working on creating a slider using the slick slider. Everything seems to be functioning properly, but instead of displaying arrows on the sides, it's showing Previous and Next buttons stacked vertically on the left side. It appears that the CSS is not loading correctly, even though I've included the slick slider CSS library. I've searched online for solutions to similar issues, but nothing has worked in my specific case. Any assistance would be greatly appreciated!
Below is the code snippet:
$(document).ready(function(){
$('.box').slick({
dots: false,
infinite: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});.main-container {
padding: 50px;
}
.box {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(6, minmax(100px, 1fr));
height: 220px;
}
// Other CSS styles...
Head section includes jQuery CDN and Slick Slider library links.Body section contains the HTML structure for the slider implementation.