I want to have a carousel of my reviews using slick.js (not need the style of slick so I don’t include it on html header.
When I try it the reviews-container disappears.
How to fix it? What I’m doing wrong?
I want the result be like the image
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slick test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Customer Reviews Section -->
<section class="reviews" aria-labelledby="reviews-heading">
<div class="reviews-header" >
<h2 id="reviews-heading">Our Happy Customers</h2>
<div class="arrows-container">
<button><img src="./assets/images/arrow-left.svg" alt="left arrow" class="slick-prev" /></button>
<button><img src="./assets/images/arrow-right.svg" alt="right arrow" class="slick-next"/></button>
</div>
</div>
<div class="reviews-container">
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
</div>
<h3>Moora S. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"Shopping at Shop.co has been a game-changer for me. The fit and quality of the clothes are unmatched, and their customer service is always helpful!"</p>
</article>
</div>
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
</div>
<h3>Sarah M. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"I'm blown away by the quality and style of the clothes I received from Shop.co. From casual wear to elegant dresses, every piece I've bought has exceeded my expectations."</p>
</article>
</div>
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
</div>
<h3>Alex K. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"Finding clothes that align with my personal style used to be a challenge until I discovered Shop.co. The range of options they offer is truly remarkable, catering to a variety of tastes and occasions."</p>
</article>
</div>
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg"></div>
<h3>James L. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"As someone who's always on the lookout for unique fashion pieces, I'm thrilled to have stumbled upon Shop.co. The selection of clothes is not only diverse but also on-point with the latest trends."</p>
</article>
</div>
<div>
<article class="reviews-item">
<div class="rating">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg">
<img src="./assets/images/Star.svg"></div>
<h3>Moora S. <span class="verified"><img src="./assets/images/verified.svg"></span></h3>
<p>"Shopping at Shop.co has been a game-changer for me. The fit and quality of the clothes are unmatched, and their customer service is always helpful!"</p>
</article>
</div>
</div>
</section>
<footer class="footer">
<div class="newsletter">
<h2>Stay up to date about our latest offers</h2>
<form action="#" aria-label="Subscribe to Newsletter">
<label for="email" class="sr-only">Enter your email address</label>
<input type="email" id="email" placeholder="Enter your email address" required>
<button type="submit">Subscribe to Newsletter</button>
</form>
</div>
<div class="footer-content">
<div class="brand">
<h3>SHOP.CO</h3>
<p>We have clothes that suit your style and which you're proud to wear. From women to men.</p>
<div class="social">
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="links">
<div>
<h4>Company</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Career</a></li>
</ul>
</div>
<div>
<h4>Help</h4>
<ul>
<li><a href="#">Customer Support</a></li>
<li><a href="#">Delivery Details</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div>
<h4>FAQ</h4>
<ul>
<li><a href="#">Account</a></li>
<li><a href="#">Manage Deliveries</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">Payments</a></li>
</ul>
</div>
<div>
<h4>Resources</h4>
<ul>
<li><a href="#">Free eBooks</a></li>
<li><a href="#">Development Tutorial</a></li>
<li><a href="#">How to - Blog</a></li>
<li><a href="#">YouTube Playlist</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© Shop.co 2000-2023, All Rights Reserved</p>
<div class="payment-options">
<img src="visa-logo.png" alt="Visa">
<img src="paypal-logo.png" alt="PayPal">
<img src="apple-pay-logo.png" alt="Apple Pay">
<img src="google-pay-logo.png" alt="Google Pay">
</div>
</div>
</footer>
<!-- Include jQuery (required for Slick.js) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Slick JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
<!-- Link to my External JavaScript -->
<script src=".//reviews-slider.js"></script>
</body>
</html>
My CSS code
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
}
/* Customer Reviews Section */
.reviews {
display: flex;
flex-direction: column;
align-items: center;
}
.reviews-header{
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%;
padding: 0 6.25rem;
}
.reviews-container{
display: flex;
gap:20px;
}
.reviews-item{
display: flex;
flex-direction: column;
/* Fixed width of 400px pixels */ ;
width: 450px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 20px;
padding: 28px 32px;
}
.reviews-item p {
font-size: 1rem;
line-height: 22px;
color: rgba(0, 0, 0, 0.6);
}
.reviews-item h3 {
font-size: 1.25rem;
font-weight: 700;
line-height: 22px;
}
.nav-btn {
background-color: #000; /* Button color */
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
margin: 0 5px;
font-size: 16px;
}
.nav-btn:hover {
background-color: #444; /* Darker color on hover */
}
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
color: #333;
}
.footer {
background-color: #f5f5f5;
padding: 20px 0;
}
.newsletter {
background-color: #000;
color: #fff;
padding: 30px 15px;
text-align: center;
}
.newsletter h2 {
font-size: 24px;
margin-bottom: 15px;
}
.newsletter form {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.newsletter input[type="email"] {
padding: 10px;
width: 300px;
border: none;
border-radius: 5px;
font-size: 16px;
}
.newsletter button {
padding: 10px 20px;
background-color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 30px 15px;
}
.footer-content .brand {
flex: 1 1 250px;
text-align: left;
}
.footer-content .brand h3 {
font-size: 20px;
margin-bottom: 10px;
}
.footer-content .brand p {
font-size: 14px;
margin-bottom: 15px;
}
.social {
display: flex;
gap: 10px;
}
.social a {
font-size: 18px;
}
.links {
display: flex;
flex: 2 1 600px;
justify-content: space-around;
}
.links div {
text-align: left;
}
.links h4 {
margin-bottom: 10px;
}
.links ul {
list-style: none;
}
.links ul li {
margin-bottom: 8px;
}
.links ul li a {
color: #333;
text-decoration: none;
}
.links ul li a:hover {
text-decoration: underline;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px 0;
border-top: 1px solid #ddd;
align-items: center;
text-align: center;
}
.footer-bottom p {
flex: 1;
}
.payment-options {
display: flex;
justify-content: center;
gap: 10px;
}
.payment-options img {
width: 50px;
}
/* Responsive Design */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
align-items: center;
}
.links {
flex-direction: column;
align-items: center;
}
.newsletter form {
flex-direction: column;
}
.newsletter input[type="email"] {
width: 100%;
}
.footer-bottom {
flex-direction: column;
}
.payment-options {
margin-top: 10px;
}
.reviews-container {
flex-direction: column; /* Stack reviews vertically on small screens */
}
.review {
margin: 10px 0; /* Reduce margin for stacked layout */
}
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
my Javascript code
// reviews carousel
$(document).ready(function () {
$(".reviews-container").slick({
slidesToShow: 3, // Number of items visible at once
slidesToScroll: 1, // Number of items scrolled per click
arrows: true, // Enable navigation arrows
prevArrow: $(".slick-prev"), // Use your custom prev arrow
nextArrow: $(".slick-next"), // Use your custom next arrow
responsive: [
{
breakpoint: 768, // Responsive breakpoint
settings: {
slidesToShow: 2, // Adjust slidesToShow on smaller screens
},
},
],
});
});
