Hi I am trying to make a slider using the slick slider and everything is working fine but instead of showing arrows on the sides it is showing the Previous and Next buttons on top and bottom on the left side Looks like CSS is not being loaded even though I have added the slick slider CSS library and I have surfed the internet and found some similar questions but nothing is working in my case
Any kind of help is highly appreciated!
Here is the code
$(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 CONTIANER */
.main-container {
padding: 50px;
}
.box {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(6, minmax(100px, 1fr));
height: 220px;
}
.box img {
border-radius: 2px;
}
.vid-container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(1, 1fr);
text-align: center;
/* border: 1px solid var(--primary); */
border-radius: 12px;
transition: all .3s linear;
}
.vid-container:hover {
transition: all .3s linear;
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1.2);
background: #111111;
filter: drop-shadow(-2px 0px 4px #303030) drop-shadow(0px -2px 4px rgba(48, 48, 48, 0.05)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.vid-cntrls{
padding-bottom:0.6rem ;
padding-right:0.6rem ;
padding-left:0.6rem ;
}
.vid-container:hover .vid-cntrls{
opacity: 1 !important;
}
.vid-icon{
cursor: pointer;
}
.vid-cntrls{
opacity: 0 !important;
}
/* utilities CSS */
.d-flex-ut{
display: flex;
justify-content: space-between;
align-items: center;
}
.mt-top-ut{
margin-top: 1.2rem;
}
.bdr-10-ut{
border-radius: 10px;
}
.mr-ut{
margin-right: 12px;
}
<head>
<!-- Jquery CDN -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
</head>
<body>
<div class="box">
<!-- Master copy Widget -->
<div class="vid-container bd-10-ut">
<div class="vid-thumbail">
<video width="100%">
<source
src="https://player.vimeo.com/external/433944538.sd.mp4?s=01521568a0488626d73b34243e27f74a789ea20b&profile_id=164&oauth2_token_id=57447761">
</video>
</div>
</div>
<div class="vid-container bd-10-ut">
<div class="vid-thumbail">
<video width="100%">
<source
src="https://player.vimeo.com/external/433944538.sd.mp4?s=01521568a0488626d73b34243e27f74a789ea20b&profile_id=164&oauth2_token_id=57447761">
</video>
</div>
</div>
<div class="vid-container bd-10-ut">
<div class="vid-thumbail">
<video width="100%">
<source
src="https://player.vimeo.com/external/433944538.sd.mp4?s=01521568a0488626d73b34243e27f74a789ea20b&profile_id=164&oauth2_token_id=57447761">
</video>
</div>
</div>
<div class="vid-container bd-10-ut">
<div class="vid-thumbail">
<video width="100%">
<source
src="https://player.vimeo.com/external/433944538.sd.mp4?s=01521568a0488626d73b34243e27f74a789ea20b&profile_id=164&oauth2_token_id=57447761">
</video>
</div>
</div>
<div class="vid-container bd-10-ut">
<div class="vid-thumbail">
<video width="100%">
<source
src="https://player.vimeo.com/external/433944538.sd.mp4?s=01521568a0488626d73b34243e27f74a789ea20b&profile_id=164&oauth2_token_id=57447761">
</video>
</div>
</div>
<div class="vid-container bd-10-ut">
<div class="vid-thumbail">
<video width="100%">
<source
src="https://player.vimeo.com/external/433944538.sd.mp4?s=01521568a0488626d73b34243e27f74a789ea20b&profile_id=164&oauth2_token_id=57447761">
</video>
</div>
</div>
</div>
</body>
2
Answers
I found the solution to the problem I forgot to add the slick slider theme.css file that's why it was showing buttons instead of arrows you can add the theme.css file and it will work perfectly!
myscript.js
Add your custom box arrow and add your custom CSS.
style.css
html code