Skip to content

Latest commit

 

History

History
74 lines (57 loc) · 1.67 KB

IMAGE-CAROUSEL.md

File metadata and controls

74 lines (57 loc) · 1.67 KB
Raw

ImageCarousel

./src/js/components/image-carousel/image-carousel.jsx

Purpose

Displays a carousel that slides between slides, displaying some text over an image background.

Props

id

  • Required - true
  • Data Type - STRING
  • Functionality - Sets the id of the component and which id the carousel sliding references while it occurs.

defaultSlide

  • Required - false
  • Data Type - NUMBER
  • Functionality - The index of the slide desired to be set as the default.
  • Default - 0

hideIndicators

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Whether you want to display the little indicator buttons that allow you to switch between slides.
  • Default - false

hideButtons

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Whether you want to display the left and right slide navigation buttons.
  • Default - false

slides

  • Required - false

  • Data Type - ARRAY

  • Functionality - An array of objects with details about each slide in the carousel.

  • Expected Data -

      [
    {
      caption: 'Text to display on the cell.',
      image: 'URL to an image.'
    }
  ]

  • Default - []

Example

import ImageCarousel from './src/js/components/image-carousel/image-carousel.jsx';

<ImageCarousel
  id="test-carousel"
  slides={[
    {
      caption: 'Item 1',
      image: 'http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap'
    },
    {
      caption: 'Item 2',
      image: 'http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap'
    },
    {
      caption: 'Item 3',
      image: 'http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap'
    }
  ]}
/>