Simple Slider

Interactive slider component with standard pagination or tabbed interface options for displaying multiple content slides.

Slider as Tabs

Uses the slide title as tab text

  • nunjucks

    What's this?

    Slider Number 1

    Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

    go to apple
  • nunjucks

    And this?

    Slider Number 2

    Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis.

  • nunjucks

    Oh, one more!

    Slider Number 3

    Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna.

Traditional Slider

Uses the traditional slider pagination

  • nunjucks

    What's this?

    Tab Number 1

    Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    go to apple where to go?
  • nunjucks

    And this?

    Tab Number 2

    Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

  • nunjucks

    Oh, one more!

    Tab Number 3

    Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Configuration

- sectionType: slider
  containerTag: section
  # container settings

  config: '' # "" = default slides, "isTabs" for tabbed interface
  slides:
    - slideClasses: ''
      image:
        src: '/assets/images/sample7.jpg'
        alt: 'Slider image description'
      text:
        leadIn: What's this?
        title: Slider Number 1
        titleTag: 'h2'
        subTitle: ''
        prose: |-
          Slide content description text goes here...
      ctas:
        - url: '/example.com'
          label: 'Learn More'
          isButton: true
          buttonStyle: 'primary'

Configuration Options

Slider Settings

PropertyTypeRequiredDescription
configstringNoSlider type - "" for default pagination, "isTabs" for tabbed interface

Slide Content

PropertyTypeRequiredDescription
slidesarrayYesArray of slide definitions
slides[n].slideClassesstringNoCSS classes for slide style variations
slides[n].imageobjectNoImage with src, alt, and caption
slides[n].textobjectNoText content with leadIn, title, titleTag, subTitle, and prose
slides[n].ctasarrayNoCall-to-action buttons for the slide

Notes

  • Standard pagination dots or tabbed navigation
  • Each slide supports images, text, and CTAs
  • Adapts to different screen sizes
  • CSS-based slide transitions for smooth user experience