Skip to content

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() {
    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) {
  // 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) {
<!DOCTYPE html>
<script src=""></script>
<script src="" type="text/javascript"></script>
<section class="slickshow carousel">
  <div class="slide"><img src="">
    <p>100s of Items On Sale!</p>
    <p><a href="#">Shop the Sale Now!</a></p>
  <div class="slide"><img src="">
  <div class="slide"><img src="">
    <h2>MORE SAVINGS</h2>
    <p>More Text Too!</p>
    <p><a href="#">Shop Now</a></p>



User contributions licensed under: CC BY-SA
10 People found this is helpful