1

Type
passive
Tags
carousel
slideshow
background

Preview

Implementation

Markup
carousel-1({ settings })
ParameterDescriptionType
imagesarray of objects defining imagesarray
hookadditional CSS class attributestring
Brief

A minimal image carousel without navigation controls or captioning, better suited to background or landing page usage.

Paths
  • location:  components/carousels/1
  • activate:  templates/_/mixins.pug
Placement
  • markup:  templates/views/**/*.pug
  • style:  styles/_/elements/carousel.styl
Dependencies
  • _.pug
  • index.styl
  • _.js
Examples
- imagePath = '/assets/images/home/_linked/_verbatim/';

+carousel-1({

    images: [
        { path: `${ imagePath }1.webp` },
        { path: `${ imagePath }2.webp` },
        { path: `${ imagePath }3.webp` },
        { path: `${ imagePath }4.webp` },
        { path: `${ imagePath }5.webp`,
            // optionally, select first
            active: true
        },
    ]

})

// change the default width and height
carousel-1(width: 1000px, height: 500px)

import carousel1 from 'carousels/1/_';

// default delay is 4000ms
carousel1({ delay: 5000 });