1. Components
  2. Interactive

Fancy carousel

A stylized slideshow that cycles through images upon click.

Fancy carousel orc-c-carousel orc-c-carousel--fancy

A stylized slideshow that cycles through images upon click.

Full height fancy carousel orc-c-carousel orc-c-carousel--fancy orc-c-carousel--full-height

Expands the content of the carousel section to fit the height of the viewport.

Tinted fancy carousel orc-c-carousel orc-c-carousel--fancy orc-c-carousel--tint

Applies a slight tint at the edges of the images in the carousel.

  • 

    <!--Pattern HTML-->
<section class="orc-c-carousel orc-c-carousel--fancy orc-js-hero-section" data-fancy-carousel data-fancy-carousel-zoomblur='true' data-fancy-carousel-ripple='true' data-fancy-carousel-next-prev-nav-selector='.orc-c-carousel__buttons' data-fancy-carousel-counter-selector='.orc-c-carousel__fraction'>

  <div class="orc-c-carousel__inner orc-js-fancy-carousel-inner" tabindex="0">
    <div class="orc-c-carousel__mask"></div>

    <ol class="orc-c-carousel__list" data-fancy-carousel-images>


      <li class="orc-c-carousel__item">


        <img data-carousel-src="https:&#x2F;&#x2F;images.contentful.com&#x2F;sahy2rpqbnsp&#x2F;2D35olIu8wOC66E8wE8m2g&#x2F;24e0b13cfc24bbb682f679a475df6289&#x2F;squarespace?w&#x3D;640&amp;h&#x3D;360&amp;fm&#x3D;jpg&amp;q&#x3D;80&amp;fit&#x3D;fill" alt="" class="orc-c-carousel__image orc-u-is-vishidden"
        />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


      <li class="orc-c-carousel__item">


        <img data-carousel-src="..&#x2F;..&#x2F;images&#x2F;sample-mischief.jpg" alt="" class="orc-c-carousel__image orc-u-is-vishidden" />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


      <li class="orc-c-carousel__item">


        <img data-carousel-src="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" alt="" class="orc-c-carousel__image orc-u-is-vishidden" />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


    </ol>
    <!--end orc-c-carousel__list-->
  </div>
  <!--end orc-c-carousel__inner-->

  <div class="orc-c-carousel__controls">
    <div class="orc-c-carousel__fraction">
    </div>
    <!--end orc-c-carousel__fraction-->

    <div class="orc-c-carousel__buttons">
    </div>
    <!--end orc-c-carousel__buttons-->
  </div>
  <!--end orc-c-carousel__controls-->

  <div class="orc-c-page-header orc-c-page-header--align-left orc-c-page-header--white">




    <h1 class="orc-c-page-header__title">A Luxury Resort Experience <em>on</em> The Vegas Strip</h1>






  </div>
  <!-- end orc-c-page-header -->


</section>
<!--end orc-c-carousel-->
    

  • 

    <!--Pattern HTML-->
<section class="orc-c-carousel orc-c-carousel--fancy orc-c-carousel--full-height orc-js-hero-section" data-fancy-carousel data-fancy-carousel-zoomblur='true' data-fancy-carousel-ripple='true' data-fancy-carousel-next-prev-nav-selector='.orc-c-carousel__buttons'
  data-fancy-carousel-counter-selector='.orc-c-carousel__fraction'>

  <div class="orc-c-carousel__inner orc-js-fancy-carousel-inner" tabindex="0">
    <div class="orc-c-carousel__mask"></div>

    <ol class="orc-c-carousel__list" data-fancy-carousel-images>


      <li class="orc-c-carousel__item">


        <img data-carousel-src="https:&#x2F;&#x2F;images.contentful.com&#x2F;sahy2rpqbnsp&#x2F;2D35olIu8wOC66E8wE8m2g&#x2F;24e0b13cfc24bbb682f679a475df6289&#x2F;squarespace?w&#x3D;640&amp;h&#x3D;360&amp;fm&#x3D;jpg&amp;q&#x3D;80&amp;fit&#x3D;fill" alt="" class="orc-c-carousel__image orc-u-is-vishidden"
        />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


      <li class="orc-c-carousel__item">


        <img data-carousel-src="..&#x2F;..&#x2F;images&#x2F;sample-mischief.jpg" alt="" class="orc-c-carousel__image orc-u-is-vishidden" />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


      <li class="orc-c-carousel__item">


        <img data-carousel-src="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" alt="" class="orc-c-carousel__image orc-u-is-vishidden" />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


    </ol>
    <!--end orc-c-carousel__list-->
  </div>
  <!--end orc-c-carousel__inner-->

  <div class="orc-c-carousel__controls">
    <div class="orc-c-carousel__fraction">
    </div>
    <!--end orc-c-carousel__fraction-->

    <div class="orc-c-carousel__buttons">
    </div>
    <!--end orc-c-carousel__buttons-->
  </div>
  <!--end orc-c-carousel__controls-->

  <div class="orc-c-page-header orc-c-page-header--align-left orc-c-page-header--white">




    <h1 class="orc-c-page-header__title">A Luxury Resort Experience <em>on</em> The Vegas Strip</h1>






  </div>
  <!-- end orc-c-page-header -->


</section>
<!--end orc-c-carousel-->
    

  • 

    <!--Pattern HTML-->
<section class="orc-c-carousel orc-c-carousel--fancy orc-c-carousel--tint orc-js-hero-section" data-fancy-carousel data-fancy-carousel-zoomblur='true' data-fancy-carousel-ripple='true' data-fancy-carousel-next-prev-nav-selector='.orc-c-carousel__buttons'
  data-fancy-carousel-counter-selector='.orc-c-carousel__fraction'>

  <div class="orc-c-carousel__inner orc-js-fancy-carousel-inner" tabindex="0">
    <div class="orc-c-carousel__mask"></div>

    <ol class="orc-c-carousel__list" data-fancy-carousel-images>


      <li class="orc-c-carousel__item">


        <img data-carousel-src="https:&#x2F;&#x2F;images.contentful.com&#x2F;sahy2rpqbnsp&#x2F;2D35olIu8wOC66E8wE8m2g&#x2F;24e0b13cfc24bbb682f679a475df6289&#x2F;squarespace?w&#x3D;640&amp;h&#x3D;360&amp;fm&#x3D;jpg&amp;q&#x3D;80&amp;fit&#x3D;fill" alt="" class="orc-c-carousel__image orc-u-is-vishidden"
        />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


      <li class="orc-c-carousel__item">


        <img data-carousel-src="..&#x2F;..&#x2F;images&#x2F;sample-mischief.jpg" alt="" class="orc-c-carousel__image orc-u-is-vishidden" />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


      <li class="orc-c-carousel__item">


        <img data-carousel-src="..&#x2F;..&#x2F;images&#x2F;sample-rise-and-dine.jpg" alt="" class="orc-c-carousel__image orc-u-is-vishidden" />

        <div class="orc-c-carousel__content">


        </div>
        <!--end orc-c-carousel__list__item__content-->
      </li>
      <!--end orc-c-carousel__list__item-->


    </ol>
    <!--end orc-c-carousel__list-->
  </div>
  <!--end orc-c-carousel__inner-->

  <div class="orc-c-carousel__controls">
    <div class="orc-c-carousel__fraction">
    </div>
    <!--end orc-c-carousel__fraction-->

    <div class="orc-c-carousel__buttons">
    </div>
    <!--end orc-c-carousel__buttons-->
  </div>
  <!--end orc-c-carousel__controls-->

  <div class="orc-c-page-header orc-c-page-header--align-left orc-c-page-header--white">




    <h1 class="orc-c-page-header__title">A Luxury Resort Experience <em>on</em> The Vegas Strip</h1>






  </div>
  <!-- end orc-c-page-header -->


</section>
<!--end orc-c-carousel-->

Usage

When to use

When multiple images are available to evoke an experience. Fancy carousels don’t link elsewhere; they’re simply to be looked at and enjoyed.

When to consider an alternative

If only one visual asset is available, or if the content needs to link to a feature, consider a hero or video hero instead.

Class Name Description 
orc-c-carousel
Required

Apply to the fancy carousel’s block’s containing HTML element. This class is set to position: relative to help position the carousel’s content.

 
orc-c-carousel--fancy
Required

Add to orc-c-carousel along with the data attribute data-fancy-carousel to give the options to add blur and ripple effect data attributes to the carousel. Set data-fancy-carousel-zoomblur to true to add a blur and data-fancy-carousel-ripple to true for a ripple effect.

 
orc-c-carousel--full-height
Modifier

Add to orc-c-carousel to fit the content of the carousel section to the height of the viewport roughly.

 
orc-c-carousel--tint
Modifier

Add to orc-c-carousel to add a tint to the images used within the carousel.

 
orc-c-carousel__inner
Required

Add to inner div of the carousel to help layout the content within the carousel.

 
orc-js-carousel-inner
JS

Add to orc-c-carousel__inner to allow JS to target this element.

 
orc-js-carousel-mask

Added as an empty div within the carousel to add the shadow around the images of the carousel.

 
orc-c-carousel__list
Required

Added to the ordered list of images. This is used with the data attribute data-fancy-carousel-images to create a canvas for the images when JS is active.

 
orc-c-carousel__item
Required

Added to the list items within the `orc-c-carousel__list.

 
orc-c-carousel__image

Added to the image within each orc-c-carousel__item. These are set to orc-u-is-vishidden when JS is activated so that the canvas is visible while screen readers can still read the <img> tags.

 
orc-c-carousel__controls

Added to the div that contains the carousel counter and previous/next buttons. Used to position this content.

 
orc-c-carousel__fraction

Added to the container of the carousel counter.

 
orc-c-carousel__numerator

Added to the div that represents the current orc-c-carousel__item being displayed.

 
orc-c-carousel__bar

Added to the div that separates the current carousel item from the total carousel items in the counter.

 
orc-c-carousel__denominator

Added to the div that represents the total orc-c-carousel__item count

 
orc-c-carousel__buttons

Added to the div that contains the previous/next buttons of the carousel.

 
orc-c-carousel__prev-btn

Added to the previous carousel item button.

 
orc-js-fancy-carousel-nav-button
JS

Added for JS to target both previous/next buttons for carousel functionality.

 
orc-js-fancy-carousel-nav-prev
JS

Added for JS to target previous button for carousel functionality.

 
orc-c-carousel__next-btn

Added to the next carousel item button.

 
orc-js-carousel-next-btn
JS

Added for JS to target next button for carousel functionality.

 
orc-c-page-header

Optional page header if displayed within the carousel. See page header for class explanations for this component.