Slick Carousel not animating. All slide content shows at once without navigation

JS noob here. I’m sorry if the answer is obvious, but I can’t figure out why my slick carousel won’t load. I’ve tried everything I can think of, but I’m at a loss. Please help me! Also, any recommended crash courses to understand the basics better would help greatly.

    




jQuery(document).on('ready', function() {
  jQuery(".slickshow").slick({
    lazyLoad: 'ondemand',
    slide: '.slide',
    autoplay: true,
    autoplaySpeed: 5000,
    dots: true,
    prevArrow: '&#10094',
    nextArrow: '&#10095',
    speed: 1000,
    fade: true,
    cssEase: 'linear',
    slidesToShow: 1,
    adaptiveHeight: true,
    swipe: true,
    swipeToSlide: true,
    infinite: true
  });
});
// On swipe event
jQuery('.slickshow').on('swipe', function(event, slick, direction) {
  console.log(direction);
  // left
});
// On edge hit
jQuery('.slickshow').on('edge', function(event, slick, direction) {
  console.log('edge was hit')
});
// On before slide change
jQuery('.slickshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  console.log(nextSlide);
});


<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
<section class="slickshow carousel">
  <!--slide-->
  <div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
    <h2>SUMMERTIME SAVINGS</h2>
    <p>100s of Items On Sale!</p>
    <p><a href="#">Shop the Sale Now!</a></p>
  </div>
  <!--slide-->
  <div class="slide"><img src="https://via.placeholder.com/1440x500?text=Another+One">
  </div>
  <!--slide-->
  <div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">
    <h2>MORE SAVINGS</h2>
    <p>More Text Too!</p>
    <p><a href="#">Shop Now</a></p>
  </div>
</section>

Slick Carousel not animating. All slide content shows at once without navigation

Advertisement

Answer