CODEWITHSUNDEEP
javascriptslick.js
MrJoky
MrJoky

Reputation: 294

Slides stack on page load

I'm facing an issue with slick.js. The snippet I inserted is showing it too, but not as long as it is on my website.

I've checked the loading order for slick and the other JS files. And as far as I know, the order should be correct. The only reason I can see is that the slick files and function are loading slower than the content itself.

Note: CDN is just for the snipped. For my project, I load it locally.

Things I tried:

What can I do to avoid this loading issue?

Network Dev-Tool

$(document).ready(function() {
  $('.slide-container').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-chevron-left" style="font-size: 2rem;"></i></button>',
    nextArrow: '<button type="button" class="slick-next"><i class="fa fa-chevron-right" style="font-size: 2rem;"></i></button>',
    refresh: true
  });
});
.slick-slide {
  position: relative;
}

.customer-slide {
  background: #000;
  height: 96vh !important;
  width: 100%;
}

.slick-prev,
.slick-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #000;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 9999;
  background-color: #fff;
  border: none;
}

.slick-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
}

.slider-text h1 {
  font-size: 5rem;
  margin: 0;
}

.slick-dots {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.slick-dots li {
  margin: 0 5px;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 12px;
  height: 12px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #cecece20;
  border-radius: 50%;
  transition: background 0.3s;
}

.slick-dots li.slick-active button {
  background: #000;
}
<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
</head>

<body>
  <div class="slide-container mobile">
    <div class="customer-slide">
      <div class="slider-text">
        <h1>Slide 1</h1>
      </div>
    </div>
    <div class="customer-slide">
      <div class="slider-text">
        <h1>Slide 2</h1>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>

EDIT Something I tried too. I thought adding a time-out and an if statement with a specific slick class this would also help but... No.

$(document).ready(function() {
  setTimeout(function() {
    if (!$('.slide-container').hasClass('slick-initialized')) {
      $('.slide-container').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        infinite: true,
        cssEase: 'linear',
        prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-chevron-left" style="font-size: 2rem;"></i></button>',
        nextArrow: '<button type="button" class="slick-next"><i class="fa fa-chevron-right" style="font-size: 2rem;"></i></button>'
      });
    }
  }, 600);
});

Here is an image of the problem slickSlideStack

Upvotes: 0

Views: 76

Answers (1)

MrJoky
MrJoky

Reputation: 294

This is the best solution I've come up with so far. By adding an extra class and a timeout function to this class. This delays the load of the second slide and prevents the overlapping/stacking.

setTimeout(function() {
  $('.hide-slide').removeClass('hide-slide');
}, 100);
.hide-slide {
  visibility: hidden;
}

Upvotes: 0

Related Questions