Slick Slider CMS
Add a slick slider for your Webflow CMS items via this custom Javascript code.
Add a slick slider for your Webflow CMS items via this custom Javascript code.
How to add it
- Add the CSS to your head section of your pages custom code
- Add the Javascript to your closing body section of your pages custom code
The code
Javascript
<!-- Add to body -->
<!-- Slick Slider JS -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- Slider Config - the target class should go on the 'Collection List' element-->
<script type="text/javascript">
$(document).ready(function(){
$('.slick-slider-list').slick({
arrows: false,
infinite: true,
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 8000,
speed: 300,
easing: 'easeInOutExpo'
});
});
</script>
<!-- Slider Custom Nav -->
<script>
$('.slide-right').click(function(){
$('.slick-slider-list').slick('slickNext');
});
$('.slide-left').click(function(){
$('.slick-slider-list').slick('slickPrev');
});
</script>
CSS
<!-- Add to head section -->
<!-- Slick Slider CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Modifications for Equal Height Cards and Overflow -->
<style>
.slick-list {
display: flex;
overflow: visible;
}
.slick-track {
display: flex;
margin: o;
}
</style>
