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/slick@1.8.1/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 }, }, ], });});