css Question posted in
Some basic documentation can be found here.

Css – Why is my SlickJS carousel disappearing from my page?

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:

enter image description here

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>&copy; 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
        },
      },
    ],
  });
});
Tags:

2

Answers


  1. 0

    To solve this problem you need to add heigh 100% to the 3 elements in the slick carousel.

    1. Change "article" to "h3" before
    2. Add this code below after the end of your css code and will appear again:
    /* Solutions */
.slick-list,
.slick-track,
.slick-slide h3 {
   height: 100%;   
}

    Note: To keep using "article" instead of this "h3" you can do changes in the solution css code to adapt it.

    Reference link: https://github.com/kenwheeler/slick/issues/367

    Login or Signup to reply.
  2. 0

    hmm.. the solution is actually quite simple.

    Just give your .reviews-container a width of 100%.
    oh and I really do recommend to anyhow import the slick css files, so you have a good starting point, you can always edit it afterwards.
    Example on codepen can be found here: https://codepen.io/funkysoul/pen/PoMpvVa

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search