Carousel
Overview
A slideshow component for cycling through elements—images or slides of text—like a carousel. The carousel component allows you to feature multiple pieces of content in an allocated amount of space.
Default
If there is a requirement to have multiple carousels on the same page, then please increment ID value at root and in the controls to scope each carousel. For more details please refer to the Bootstrap 4 carousel documentation (Opens in new window) .
Foster and Kinship Carer Week (4-11 May 2024)
We’re saying thank you to more than 6,000 foster and kinship carer families in Queensland for their dedication and commitment.
Helping families bounce back from tough times
Sometimes parents can feel a little stumped but there is always a way to bounce back from life’s ups and downs. Contact Family and Child Connect for free, unlimited and confidential advice.
Forget the bet. Enjoy the game.
There’s so much to love about sport—the skills, the spills, the thrills! But if you find yourself watching the odds more than the action, it might be time to check on your betting.
A new Carer Connect is here!
Are you a foster or kinship carer? A new version of the Carer Connect app is now live. Register online and download the app today.
Queensland’s child protection laws have changed
Changes to the Child Protection Act 1999 will reinforce children’s rights; strengthen children’s voices in decisions that affect them; improve how we work with First Nations children and families; and strengthen the regulation of care.
Code
<div class="qg-featured">
<div id="carousel-1" class="carousel slide" data-ride="carousel" data-interval="8000">
<div class="carousel-inner">
<div class="carousel-item active" title="title">
<a href="https://qld.gov.au/">
<img src="https://via.placeholder.com/920x572/808080/808080" alt="placeholder">
<div class="carousel-caption">
<h3>lorem ipsum </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci atque, ea fuga iste
quia? Accusantium doloribus dolorum, eius in iure, iusto odit officiis praesentium rem,
rerum similique velit voluptatum.</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="https://qld.gov.au/" title="title">
<img src="https://via.placeholder.com/920x572/000/000" alt="placeholder">
<div class="carousel-caption">
<h3>lorem ipsum </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci atque, ea fuga iste
quia? Accusantium doloribus dolorum, eius in iure, iusto odit officiis praesentium rem,
rerum similique velit voluptatum.</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="https://qld.gov.au/" title="title">
<img src="https://via.placeholder.com/920x572/ccc/ccc" alt="placeholder">
<div class="carousel-caption">
<h3>lorem ipsum </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci atque, ea fuga iste
quia? Accusantium doloribus dolorum, eius in iure, iusto odit officiis praesentium rem,
rerum similique velit voluptatum.</p>
</div>
</a>
</div>
</div>
<div class="carousel-nav clearfix">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- Controls -->
<ul class="controls-grp">
<li> <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#carousel-1" class="toggleCarousel"><i class="fa fa-pause"></i><span class="button-title">Pause slideshow</span></a></li>
<li><a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</div>
</div>
</div>