How To Add Auto sliding Logos on Go High Level

Follow the steps below to add Auto sliding Logos on your page:

• Step 1: Add an element Called “Code” to your page.

• Step 2: Add this code into the code element:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css" />

<!--Change the logo's here-->
<div class="logo-container">
<div class="slick-slider">
<div><img src="https://ingridarna.com/cashflowempress/img/site/logo9.svg" alt="Logo 1"></div>
<div><img src="https://ingridarna.com/cashflowempress/img/site/logo2.svg" alt="Logo 2"></div>
<div><img src="https://ingridarna.com/cashflowempress/img/site/logo3.svg" alt="Logo 3"></div>
<div><img src="https://ingridarna.com/cashflowempress/img/site/logo4.svg" alt="Logo 4"></div>
<div><img src="https://ingridarna.com/cashflowempress/img/site/logo5.svg" alt="Logo 5"></div>
<div><img src="https://ingridarna.com/cashflowempress/img/site/logo6.svg" alt="Logo 6"></div>
<div><img src="https://ingridarna.com/cashflowempress/img/site/logo7.svg" alt="Logo 7"></div>
<div><img src="https://ingridarna.com/cashflowempress/img/site/logo8.svg" alt="Logo 8"></div>
<div><img src="https://assets.cdn.filesafe.space/QMjIzM2bJMrZRL1Cquvi/media/64c2b14fea6e8ed571d3c73f.png" alt="Logo 9"></div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script><script>
$(document).ready(function() {
$('.slick-slider').slick({
slidesToShow: 6,
slidesToScroll: 1,
infinite: true,
autoplay: true,
autoplaySpeed: 0,
speed: 5000,
cssEase: 'linear',
arrows: false,
dots: false,
swipeToSlide: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 3
}
}
]
});
});
</script>

• Step 3: You can replace those image URLs with yours.

• Step 3: Add this code into custom CSS:

.logo-container {
width: 100%;
}

.logo-container .slick-slide {
padding: 10px;
margin: 0 10px;
/ Adjust the margin value as per your preference /
display: flex;
justify-content: center;
}

.logo-container .slick-slide img {
max-width: 100%;
height: auto;
width: auto;
}

 

• Save & Publish the page.