<div class="carousel">
<div class="hero-section">
<div class="wrapper">
<div class="hero ">
<!-- .hero--orange, .hero--yellow, .hero--red -->
<div class="hero__column hero__image">
<img src="https://previews.dropbox.com/p/thumb/AAxaM9aIXKMn9E3xXPXskzhfCXrUvCRBqNC3tQfvbl6fbwTwDmDPp7vw1vdl2HFj_6mqEbHBlPV7qTzghLjBTvrzvqitbC-j4PboAm-0qs-itmSJoxittZXtb3wDca_jpdNNLNKU2U35SR4a31Yr50mEuPoFo-oe4KcPRqQTkwSj-grTgadrNJXFm6548qBcSB3l4WYj-z2MJ9fj7DTkq4J1XK6MqV5_AJ37IN3RfnIz3HGWtkldy_KFkPYmuJFgvNzGM1YMBS21vvT7rhGHwgh2bHIp1MMexDV_F4Gvuc1u-xjDvmyAmIk2_lru6nOVuwLlcwXtcoO8hbclE1iqCELTAMa_a8ysxjUQ8xMuB7GmaoYl5udPLzi090sT1LMdudQUV2QeXvPo5uA9BiS_MKYT9S3HytPJOjSaRcOxiqmZCw/p.jpeg?fv_content=true&size_mode=5" alt="Funders">
</div>
<div class="hero__column hero__lead">
<h2 class="hero__title">
This is the title of the Hero
</h2>
<p class="hero__blurb">
360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences.
</p>
</div>
</div>
</div>
</div>
<div class="hero-section">
<div class="wrapper">
<div class="hero ">
<!-- .hero--orange, .hero--yellow, .hero--red -->
<div class="hero__column hero__logo">
<a href="/"><img src="/images/360-logos/insights/360insights-color.svg" alt="360 Insights"></a>
</div>
<div class="hero__column hero__lead">
<h2 class="hero__title">
This is the title of the Hero
</h2>
<p class="hero__blurb">
360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel">
{% for slide in slides %}
<div class="hero-section">
<div class="wrapper">
<div class="hero {% if colour %}hero--{{color}}{% endif %}">
<!-- .hero--orange, .hero--yellow, .hero--red -->
{% if slide.logo %}
<div class="hero__column hero__logo">
<a href="/"><img src="/images/360-logos/{{slide.logo}}/360{{slide.logo}}-color.svg" alt="360 {{slide.logo | capitalize }}"></a>
</div>
{% elif slide.image %}
<div class="hero__column hero__image">
<img src="{{ slide.image.url }}" alt="{{ slide.image.title }}">
</div>
{% else %}
<div class="hero__column hero__logo">
<a href="/"><img src="/images/360-logos/main/360giving-logo.svg" alt="360 Giving"></a>
</div>
{% endif %}
<div class="hero__column hero__lead">
<h2 class="hero__title">
{% if slide.title %}{{slide.title}}{% else %}See your grantmaking in new ways{% endif %}
</h2>
<p class="hero__blurb">
{% if slide.blurb %}{{slide.blurb}}{% else %}360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences.{% endif %}
</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{
"slides": [
{
"title": "This is the title of the Hero",
"image": {
"url": "https://previews.dropbox.com/p/thumb/AAxaM9aIXKMn9E3xXPXskzhfCXrUvCRBqNC3tQfvbl6fbwTwDmDPp7vw1vdl2HFj_6mqEbHBlPV7qTzghLjBTvrzvqitbC-j4PboAm-0qs-itmSJoxittZXtb3wDca_jpdNNLNKU2U35SR4a31Yr50mEuPoFo-oe4KcPRqQTkwSj-grTgadrNJXFm6548qBcSB3l4WYj-z2MJ9fj7DTkq4J1XK6MqV5_AJ37IN3RfnIz3HGWtkldy_KFkPYmuJFgvNzGM1YMBS21vvT7rhGHwgh2bHIp1MMexDV_F4Gvuc1u-xjDvmyAmIk2_lru6nOVuwLlcwXtcoO8hbclE1iqCELTAMa_a8ysxjUQ8xMuB7GmaoYl5udPLzi090sT1LMdudQUV2QeXvPo5uA9BiS_MKYT9S3HytPJOjSaRcOxiqmZCw/p.jpeg?fv_content=true&size_mode=5",
"title": "Funders"
},
"color": "teal",
"lead": "360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences."
},
{
"title": "This is the title of the Hero",
"logo": "insights",
"color": "orange",
"lead": "360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences."
}
]
}
// Feel free to check the slick slider docs to customize
// your carousel. https://kenwheeler.github.io/slick/
$('.carousel').slick({
dots: true,
arrows: false,
autoplay: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
customPaging: function customDots(slider, i){
return '<a class="dot" role="button"</a>';
}
});
// Carousel dots
.slick-dots {
position: absolute;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.slick-dots li{
cursor: pointer;
display: inline-block;
border: 0;
width: 20px;
height: 4px;
}
.dot {
display: block;
width: 10px;
height: 10px;
text-decoration: none;
background-color: var(--color-orange);
border-radius: 50%;
cursor: pointer;
}
.slick-active .dot {
background-color: var(--color-base);
}
No notes defined.