Carousels

Full

The carousel component is used to show multiple images that are related together. Here is an example of a full default carousel written in shorthand nfg_ui syntax.

= ui.nfg :carousel, id: 'carousel-full', controls: true, indicators: 3 do
  = ui.nfg :carousel_item, active: true, image: 'https://via.placeholder.com/600x400?text=Image+No.+1'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+2'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+3'
<div class="carousel slide" id="carousel-full" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+1" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+2" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+3" /></div>
  </div>
  <a class="carousel-control-next" data-slide="next" href="#carousel-full" role="button"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">next</span></a><a class="carousel-control-prev" data-slide="prev" href="#carousel-full" role="button"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">prev</span></a>
  <ol class="carousel-indicators mb-0">
    <li class="active" data-target="#carousel-full" data-slide-to="0"></li>
    <li data-target="#carousel-full" data-slide-to="1"></li>
    <li data-target="#carousel-full" data-slide-to="2"></li>
  </ol>
</div>
Sizes

Currently only available in public applications (like auctions), there is a fixed height on the carousel with the aspect ratio 4:3. Add a carousel-fixed-height class to the carousel component.

= ui.nfg :carousel, id: 'carousel-fixed-height', class: 'carousel-fixed-height', controls: true, indicators: 3 do
  = ui.nfg :carousel_item, active: true, image: 'https://via.placeholder.com/600x400?text=Image+No.+1'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+2'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+3'
<div class="carousel carousel-fixed-height slide" id="carousel-fixed-height" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+1" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+2" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+3" /></div>
  </div>
  <a class="carousel-control-next" data-slide="next" href="#carousel-fixed-height" role="button"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">next</span></a><a class="carousel-control-prev" data-slide="prev" href="#carousel-fixed-height" role="button"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">prev</span></a>
  <ol class="carousel-indicators mb-0">
    <li class="active" data-target="#carousel-fixed-height" data-slide-to="0"></li>
    <li data-target="#carousel-fixed-height" data-slide-to="1"></li>
    <li data-target="#carousel-fixed-height" data-slide-to="2"></li>
  </ol>
</div>
Controls

This is a manual way to render the controls rather than inline on the carousel component.

= ui.nfg :carousel, id: 'carousel-controls', controls: true do
  = ui.nfg :carousel_item, active: true, image: 'https://via.placeholder.com/600x400?text=Image+No.+1'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+2'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+3'
  = ui.nfg :carousel_control, control: :next, carousel: '#carousel-controls'
  = ui.nfg :carousel_control, control: :prev, carousel: '#carousel-controls'
<div class="carousel slide" id="carousel-controls" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+1" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+2" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+3" /></div>
    <a class="carousel-control-next" data-slide="next" href="#carousel-controls" role="button"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">next</span></a><a class="carousel-control-prev" data-slide="prev" href="#carousel-controls" role="button"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">prev</span></a></div>
  <a class="carousel-control-next" data-slide="next" href="#carousel-controls" role="button"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">next</span></a><a class="carousel-control-prev" data-slide="prev" href="#carousel-controls" role="button"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">prev</span></a></div>
Indicators
Default

This is a manual way to render the indicators rather than inline on the carousel component.

= ui.nfg :carousel, id: 'carousel-indicators' do
  = ui.nfg :carousel_item, active: true, image: 'https://via.placeholder.com/600x400?text=Image+No.+1'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+2'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+3'
  = ui.nfg :carousel_indicators, count: 3, carousel: '#carousel-indicators'
<div class="carousel slide" id="carousel-indicators" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+1" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+2" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+3" /></div>
    <ol class="carousel-indicators mb-0">
      <li class="active" data-target="#carousel-indicators" data-slide-to="0"></li>
      <li data-target="#carousel-indicators" data-slide-to="1"></li>
      <li data-target="#carousel-indicators" data-slide-to="2"></li>
    </ol>
  </div>
</div>
Thumbnail Indicators

Use this when the desire is to show thumbnails for indicators. For now, it has to be written in a more manual HAML syntax as it isn't built into nfg_ui syntax. The thumbnails start at the bottom of the carousel, but move to the left on larger devices.

#carousel-thumbnail-indicators.carousel.slide.carousel-fixed-height.carousel-has-thumbnails.carousel-fade{ data: { interval: 'false' } }
  .carousel-inner
    = ui.nfg :carousel_item, active: true, image: 'https://via.placeholder.com/400x300'
    = ui.nfg :carousel_item, image: 'https://via.placeholder.com/300x600'
    = ui.nfg :carousel_item, image: 'https://via.placeholder.com/150x150'
    = ui.nfg :carousel_control, control: :next, carousel: '#carousel-thumbnail-indicators'
    = ui.nfg :carousel_control, control: :prev, carousel: '#carousel-thumbnail-indicators'
  %ol.carousel-indicators.mb-0
    %li.active{ data: { target: '#carousel-thumbnail-indicators', 'slide-to' => '0' } }
      = ui.nfg :image, image: 'https://via.placeholder.com/400x300'
    %li{ data: { target: '#carousel-thumbnail-indicators', 'slide-to' => '1' } }
      = ui.nfg :image, image: 'https://via.placeholder.com/300x600'
    %li{ data: { target: '#carousel-thumbnail-indicators', 'slide-to' => '2' } }
      = ui.nfg :image, image: 'https://via.placeholder.com/150x150'
<div class='carousel slide carousel-fixed-height carousel-has-thumbnails carousel-fade' data-interval='false' id='carousel-thumbnail-indicators'>
  <div class='carousel-inner'>
    <div class="carousel-item active"><img class="d-block w-100" src="https://via.placeholder.com/400x300" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/300x600" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/150x150" /></div>
    <a class="carousel-control-next" data-slide="next" href="#carousel-thumbnail-indicators" role="button"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">next</span></a><a class="carousel-control-prev" data-slide="prev" href="#carousel-thumbnail-indicators" role="button"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">prev</span></a></div>
  <ol class='carousel-indicators mb-0'>
    <li class='active' data-slide-to='0' data-target='#carousel-thumbnail-indicators'>
      <img class="img-fluid" src="https://via.placeholder.com/400x300" /></li>
    <li data-slide-to='1' data-target='#carousel-thumbnail-indicators'>
      <img class="img-fluid" src="https://via.placeholder.com/300x600" /></li>
    <li data-slide-to='2' data-target='#carousel-thumbnail-indicators'>
      <img class="img-fluid" src="https://via.placeholder.com/150x150" /></li>
  </ol>
</div>
Miscellaneous
No Auto Scroll

By default, when a page loades, the carousel auto rotates. Use this to turn off the auto rotation.

= ui.nfg :carousel, id: 'carousel-no-auto', auto: false, controls: true do
  = ui.nfg :carousel_item, active: true, image: 'https://via.placeholder.com/600x400?text=Image+No.+1'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+2'
  = ui.nfg :carousel_item, image: 'https://via.placeholder.com/600x400?text=Image+No.+3'
<div class="carousel slide" id="carousel-no-auto" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+1" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+2" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+3" /></div>
  </div>
  <a class="carousel-control-next" data-slide="next" href="#carousel-no-auto" role="button"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">next</span></a><a class="carousel-control-prev" data-slide="prev" href="#carousel-no-auto" role="button"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">prev</span></a></div>
Captions & Labels

Use captions and labels when describing the image in the carousel item component.

= ui.nfg :carousel, id: 'carousel-captions', controls: true, indicators: 3 do
  = ui.nfg :carousel_item, caption: 'Automatic Caption No. 1', label: 'Automatic Label No. 1', active: true, image: 'https://via.placeholder.com/600x400?text=Image+No.+1'
  = ui.nfg :carousel_item, caption: 'Automatic Caption No. 2', label: 'Automatic Label No. 2', image: 'https://via.placeholder.com/600x400?text=Image+No.+2'
  = ui.nfg :carousel_item, caption: 'Automatic Caption No. 3', label: 'Automatic Label No. 3', image: 'https://via.placeholder.com/600x400?text=Image+No.+3'
<div class="carousel slide" id="carousel-captions" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+1" />
      <div class="carousel-caption">
        <h5>Automatic Label No. 1</h5>
        Automatic Caption No. 1</div>
    </div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+2" />
      <div class="carousel-caption">
        <h5>Automatic Label No. 2</h5>
        Automatic Caption No. 2</div>
    </div>
    <div class="carousel-item"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+3" />
      <div class="carousel-caption">
        <h5>Automatic Label No. 3</h5>
        Automatic Caption No. 3</div>
    </div>
  </div>
  <a class="carousel-control-next" data-slide="next" href="#carousel-captions" role="button"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">next</span></a><a class="carousel-control-prev" data-slide="prev" href="#carousel-captions" role="button"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">prev</span></a>
  <ol class="carousel-indicators mb-0">
    <li class="active" data-target="#carousel-captions" data-slide-to="0"></li>
    <li data-target="#carousel-captions" data-slide-to="1"></li>
    <li data-target="#carousel-captions" data-slide-to="2"></li>
  </ol>
</div>
Custom Item Intervals

Each carousel item component can have its own speed of transition. Set the interval to the amount of milliseconds.

= ui.nfg :carousel, id: 'carousel-item-intervals', controls: true, indicators: 3 do
  = ui.nfg :carousel_item, interval: 1000, active: true, image: 'https://via.placeholder.com/600x400?text=Image+No.+1'
  = ui.nfg :carousel_item, interval: 5000, image: 'https://via.placeholder.com/600x400?text=Image+No.+2'
  = ui.nfg :carousel_item, interval: 200, image: 'https://via.placeholder.com/600x400?text=Image+No.+3'
<div class="carousel slide" id="carousel-item-intervals" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+1" /></div>
    <div class="carousel-item" data-interval="5000"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+2" /></div>
    <div class="carousel-item" data-interval="200"><img class="d-block w-100" src="https://via.placeholder.com/600x400?text=Image+No.+3" /></div>
  </div>
  <a class="carousel-control-next" data-slide="next" href="#carousel-item-intervals" role="button"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">next</span></a><a class="carousel-control-prev" data-slide="prev" href="#carousel-item-intervals" role="button"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">prev</span></a>
  <ol class="carousel-indicators mb-0">
    <li class="active" data-target="#carousel-item-intervals" data-slide-to="0"></li>
    <li data-target="#carousel-item-intervals" data-slide-to="1"></li>
    <li data-target="#carousel-item-intervals" data-slide-to="2"></li>
  </ol>
</div>
Traits
Carousel

The carousel component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the carousel.

id: 'my_id'
= ui.nfg :carousel, id: 'my_id'
class:

Adds a class to the carousel.

class: 'my-class'
= ui.nfg :carousel, class: 'my-class'
describe:

For addding a data-describe to any carousel.

describe: 'test-data-describe'
= ui.nfg :carousel, describe: 'test-data-describe'
controls:

Shows the carousel controls above the images.

controls: true
= ui.nfg :carousel, controls: true
indicators:

You must use an integer that represents how many images are within the carousel.

indicators: 3
= ui.nfg :carousel, indicators: 3
auto:

Prevents the carousel from auto rotating on page load. Default is true.

auto: false
= ui.nfg :carousel, auto: false
render_if:

Condition to determine if the carousel shows or not.

render_if: (1==1)
= ui.nfg :carousel, title: 'Rendered', render_if: (1==1)
render_unless:

Condition to determine if the carousel shows or not.

render_unless: (1==1)
= ui.nfg :carousel, title: 'Not Rendered', render_unless: (1==1)
Carousel Item

The carousel item component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the carousel item.

id: 'my_id'
= ui.nfg :carousel_item, id: 'my_id'
class:

Adds a class to the carousel item.

class: 'my-class'
= ui.nfg :carousel_item, class: 'my-class'
describe:

For addding a data-describe to any carousel item.

describe: 'test-data-describe'
= ui.nfg :carousel_item, describe: 'test-data-describe'
active:

Sets the carousel item to active.

active: true
= ui.nfg :carousel_item, active: true
image:

For including a path to the file.

image: 'test.png'
= ui.nfg :carousel_item, image: 'test.png'
caption:

Adds caption text on the carousel item.

caption: 'Caption here'
= ui.nfg :carousel_item, caption: 'Caption here'
label:

Adds label text on the carousel item.

label: 'Label here'
= ui.nfg :carousel_item, label: 'Label here'
interval:

Set a custom amount of time before the next image shows.

interval: 1000
= ui.nfg :carousel_item, interval: 1000
Carousel Controls

The carousel controls component has these avaiable traits.

Trait
Options
Example
control:

Signifies which arrow displays for the carousel.

control: :prev
control: :next
= ui.nfg :carousel_control, control: :prev
carousel:

Tells which carousel the controls should move.

carousel: '#my_id'
= ui.nfg :carousel_control, carousel: '#my_id'
Carousel Indicators

The carousel indicators component has these avaiable traits.

Trait
Options
Example
active:

Tells which indicator should be active on load.

active: 1
= ui.nfg :carousel_indicators, active: 1
count:

You must use an integer that represents how many images are within the carousel.

count: 3
= ui.nfg :carousel_indicators, count: 3
carousel:

Tells which carousel the indicators should move.

carousel: '#my_id'
= ui.nfg :carousel_indicators, carousel: '#my_id'