The section is used to display a collection of logos which slides infinitely.
Output:
Code:
<div class="darkout-section">
{% include do-carousel-logo.html tag="default" %}
</div>
_data > do-carousel-logo.yml
- tag: "default" # Use carousel-logo tag here
logos:
- logo: "/assets/images/carousel-logo/tech-logos_saas.svg" # Use carousel-logo image here
- logo: "/assets/images/carousel-logo/tech-logos_sourcetree.svg" # Use carousel-logo image here
Step2: On the page use
<div class="darkout-section">{% include do-carousel-logo.html tag="default" %}</div>
_includes/do-footer-script.html
$('.customer-logos').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 991,
settings: {
slidesToShow: 5
}
},{
breakpoint: 768,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 2
}
}]
});