JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
</head>
<body>
<footer>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
</footer>
</body>
SCSS
.slick-slider {
max-width: 280px
}
.slick-slider-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.slick-arrow {
&.slick-prev {
left: 10px;
z-index: 1;
}
&.slick-next {
right: 10px;
z-index: 1;
}
}
JavaScript
$('.slick-slider').slick();