extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/docs/components/carousel/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Base'},
'Carousel'
],
)
block view
+docs-components('https://coreui.io/docs/components/carousel/')
.card.mb-4
.card-header
strong Carousel
span.small.ms-1 Slides only
.card-body
p.text-body-secondary.small
| Here’s a carousel with slides. Note the appearance of the
code .d-block
| also,
code .w-100
| on carousel images to override browser default image alignment.
+example('https://coreui.io/docs/components/carousel/#slides-only')
#carouselExampleSlidesOnly.carousel.slide(data-coreui-ride='carousel')
.carousel-inner
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#777')
text(x='50%' y='50%' fill='#555' dy='.3em') First slide
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#666')
text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
.carousel-item.active
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#555')
text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
.card.mb-4
.card-header
strong Carousel
span.small.ms-1 With controls
.card-body
p.text-body-secondary.small
| Adding in the previous and next controls. We recommend using
code
= '<button>'
| elements, but you can also use
code
= '<a>'
| elements with
code role="button"
| .
+example('https://coreui.io/docs/components/carousel/#with-controls')
#carouselExampleControls.carousel.slide(data-coreui-ride='carousel')
.carousel-inner
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#777')
text(x='50%' y='50%' fill='#555' dy='.3em') First slide
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#666')
text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
.carousel-item.active
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#555')
text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleControls' data-coreui-slide='prev')
span.carousel-control-prev-icon(aria-hidden='true')
span.visually-hidden Previous
button.carousel-control-next(type='button' data-coreui-target='#carouselExampleControls' data-coreui-slide='next')
span.carousel-control-next-icon(aria-hidden='true')
span.visually-hidden Next
.card.mb-4
.card-header
strong Carousel
span.small.ms-1 With indicators
.card-body
p.text-body-secondary.small You can attach the indicators to the carousel, lengthwise the controls, too.
+example('https://coreui.io/docs/components/carousel/#with-indicators')
#carouselExampleIndicators.carousel.slide(data-coreui-ride='carousel')
.carousel-indicators
button(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide-to='0' aria-label='Slide 1')
button(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide-to='1' aria-label='Slide 2')
button.active(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide-to='2' aria-label='Slide 3' aria-current='true')
.carousel-inner
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#777')
text(x='50%' y='50%' fill='#555' dy='.3em') First slide
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#666')
text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
.carousel-item.active
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#555')
text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide='prev')
span.carousel-control-prev-icon(aria-hidden='true')
span.visually-hidden Previous
button.carousel-control-next(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide='next')
span.carousel-control-next-icon(aria-hidden='true')
span.visually-hidden Next
.card.mb-4
.card-header
strong Carousel
span.small.ms-1 With captions
.card-body
p.text-body-secondary.small
| You can add captions to slides with the
code .carousel-caption
| element within any
code .carousel-item
| . They can be immediately hidden on smaller viewports, as shown below, with optional
a(href='https://coreui.io/docs/utilities/display/') display utilities
| . We hide them with
code .d-none
| and draw them back on medium-sized devices with
code .d-md-block
| .
+example('https://coreui.io/docs/components/carousel/#with-captions')
#carouselExampleCaptions.carousel.slide(data-coreui-ride='carousel')
.carousel-indicators
button(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide-to='0' aria-label='Slide 1')
button(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide-to='1' aria-label='Slide 2')
button.active(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide-to='2' aria-label='Slide 3' aria-current='true')
.carousel-inner
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#777')
text(x='50%' y='50%' fill='#555' dy='.3em') First slide
.carousel-caption.d-none.d-md-block
h5 First slide label
p Some representative placeholder content for the first slide.
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#666')
text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
.carousel-caption.d-none.d-md-block
h5 Second slide label
p Some representative placeholder content for the second slide.
.carousel-item.active
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#555')
text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
.carousel-caption.d-none.d-md-block
h5 Third slide label
p Some representative placeholder content for the third slide.
button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide='prev')
span.carousel-control-prev-icon(aria-hidden='true')
span.visually-hidden Previous
button.carousel-control-next(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide='next')
span.carousel-control-next-icon(aria-hidden='true')
span.visually-hidden Next
.card.mb-4
.card-header
strong Carousel
span.small.ms-1 Crossfade
.card-body
p.text-body-secondary.small
| Add
code .carousel-fade
| to your carousel to animate slides with a fade transition instead of a slide.
+example('https://coreui.io/docs/components/carousel/#crossfade')
#carouselExampleFade.carousel.slide.carousel-fade(data-coreui-ride='carousel')
.carousel-inner
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#777')
text(x='50%' y='50%' fill='#555' dy='.3em') First slide
.carousel-item
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#666')
text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
.carousel-item.active
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#555')
text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleFade' data-coreui-slide='prev')
span.carousel-control-prev-icon(aria-hidden='true')
span.visually-hidden Previous
button.carousel-control-next(type='button' data-coreui-target='#carouselExampleFade' data-coreui-slide='next')
span.carousel-control-next-icon(aria-hidden='true')
span.visually-hidden Next
.card.mb-4
.card-header
strong Carousel
span.small.ms-1 Dark variant
.card-body
p.text-body-secondary.small
| Add
code .carousel-dark
| to the
code .carousel
| for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the
code filter
| CSS property. Captions and controls have additional Sass variables that customize the
code color
| and
code background-color
| .
+example('https://coreui.io/docs/components/carousel/#dark-variant')
#carouselExampleDark.carousel.carousel-dark.slide(data-coreui-ride='carousel')
.carousel-indicators
button(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide-to='0' aria-label='Slide 1')
button(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide-to='1' aria-label='Slide 2')
button.active(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide-to='2' aria-label='Slide 3' aria-current='true')
.carousel-inner
.carousel-item(data-coreui-interval='10000')
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#f5f5f5')
text(x='50%' y='50%' fill='#aaa' dy='.3em') First slide
.carousel-caption.d-none.d-md-block
h5 First slide label
p Some representative placeholder content for the first slide.
.carousel-item(data-coreui-interval='2000')
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#eee')
text(x='50%' y='50%' fill='#bbb' dy='.3em') Second slide
.carousel-caption.d-none.d-md-block
h5 Second slide label
p Some representative placeholder content for the second slide.
.carousel-item.active
svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
title Placeholder
rect(width='100%' height='100%' fill='#e5e5e5')
text(x='50%' y='50%' fill='#999' dy='.3em') Third slide
.carousel-caption.d-none.d-md-block
h5 Third slide label
p Some representative placeholder content for the third slide.
button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide='prev')
span.carousel-control-prev-icon(aria-hidden='true')
span.visually-hidden Previous
button.carousel-control-next(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide='next')
span.carousel-control-next-icon(aria-hidden='true')
span.visually-hidden Next
