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.
JavaScript
x
65
65
1
2
3
4
5
6
jQuery(document).on('ready', function() {7
jQuery(".slickshow").slick({8
lazyLoad: 'ondemand',9
slide: '.slide',10
autoplay: true,11
autoplaySpeed: 5000,12
dots: true,13
prevArrow: '❮',14
nextArrow: '❯',15
speed: 1000,16
fade: true,17
cssEase: 'linear',18
slidesToShow: 1,19
adaptiveHeight: true,20
swipe: true,21
swipeToSlide: true,22
infinite: true23
});24
});25
// On swipe event26
jQuery('.slickshow').on('swipe', function(event, slick, direction) {27
console.log(direction);28
// left29
});30
// On edge hit31
jQuery('.slickshow').on('edge', function(event, slick, direction) {32
console.log('edge was hit')33
});34
// On before slide change35
jQuery('.slickshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {36
console.log(nextSlide);37
});38
39
40
<!DOCTYPE html>41
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>42
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>43
<section class="slickshow carousel">44
<!--slide-->45
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">46
<h2>SUMMERTIME SAVINGS</h2>47
<p>100s of Items On Sale!</p>48
<p><a href="#">Shop the Sale Now!</a></p>49
</div>50
<!--slide-->51
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Another+One">52
</div>53
<!--slide-->54
<div class="slide"><img src="https://via.placeholder.com/1440x500?text=Placeholder+Image">55
<h2>MORE SAVINGS</h2>56
<p>More Text Too!</p>57
<p><a href="#">Shop Now</a></p>58
</div>59
</section>60
61
62
63
64
65