Marquee

stablev1.0.0

Display a list of images as a never ending slideshow.

Overview

Use the marquee component to convert a simple image list into a never ending image slideshows.

Same aspect ratio images, 8rem height, running right:

  • A jawless skull looking to its right side.
  • A skull looking to something funny on its right side.
  • A skull looking to the front.
  • A skull looking to its left side.
  • A jawless skull looking into your soul.


Only two images, 4rem height, running left:

  • Stupid placeholder 1
  • Stupid placeholder 2


Different aspect ratio images, 12rem height, running right:

  • This is above your head.
  • This is under your head.
  • This is all around you.
  • This is you.

Usage

Dependencies

To get the marquee component working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
  3. Javascript
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/02-molecules/marquee';

import initMarquee from 'design-system/src/js/02-molecules/marquee';

Basic code

The base for the marque is a div element with the marquee class. This element is expected to have an unique ID assigned.

Inside of it, we have an ul element with the class marquee__list populated with li elements with a marquee__item class, each one containing an img element with the class marquee__img

Initialize each one of the marquees calling the imported initMarquee function.

  1. HTML
  2. Pug
  3. Javascript
<div class="marquee" id="skulls-marquee" style="height: 8rem;">
  <ul class="marquee__list">
    <li class="marquee__item"><img class="marquee__img" src="img/skull_1.png" alt="A jawless skull looking to its right side." /></li>
    <li class="marquee__item"><img class="marquee__img" src="img/skull_2.png" alt="A skull looking to something funny on its right side." /></li>
    <li class="marquee__item"><img class="marquee__img" src="img/skull_3.png" alt="A skull looking to the front." /></li>
    <li class="marquee__item"><img class="marquee__img" src="img/skull_4.png" alt="A skull looking to its left side." /></li>
    <li class="marquee__item"><img class="marquee__img" src="img/skull_5.png" alt="A jawless skull looking into your soul." /></li>
  </ul>
</div>

#skulls-marquee.marquee(style='height: 8rem;')
  ul.marquee__list
    li.marquee__item
      img.marquee__img(src='/img/marquee/skull1.png' alt='A jawless skull looking to its right side.')
    li.marquee__item
      img.marquee__img(src='/img/marquee/skull2.png' alt='A skull looking to something funny on its right side.')
    li.marquee__item
      img.marquee__img(src='/img/marquee/skull3.png' alt='A skull looking to the front.')
    li.marquee__item
      img.marquee__img(src='/img/marquee/skull4.png' alt='A skull looking to its left side.')
    li.marquee__item
      img.marquee__img(src='/img/marquee/skull5.png' alt='A jawless skull looking into your soul.')

initMarquee({
  marqueeId: 'skulls-marquee'
});

Function call

initMarquee( options );

The function takes a single argument, a configuration object. Returns null in case of a failure that makes impossible to initialize the marquee, true otherwise.

Property Type Default Required Description
options.marqueeId string / Yes The marquee base element ID.
options.direction String 'right' No Specify the slide direction. Either 'left' or 'right'.

HTML attributes

data-lazyMarqueeSrc

You can use this data attribute to specify the image source path for the marquee images (instead of the regular src attribute).

These images will then use lazy loading.

  • A lazy dog
  • A lazy wolf
  • A lazy cat
  1. HTML
  2. Pug
  3. Javascript
<div class="marquee" id="lazy-marquee" style="height: 4rem;">
  <ul class="marquee__list">
    <li class="marquee__item"><img class="marquee__img" data-lazyMarqueeSrc="/img/marquee/lazyDog.jpg" alt="A lazy dog" /></li>
    <li class="marquee__item"><img class="marquee__img" data-lazyMarqueeSrc="/img/marquee/lazyWolf.jpg" alt="A lazy wolf" /></li>
    <li class="marquee__item"><img class="marquee__img" data-lazyMarqueeSrc="/img/marquee/lazyCat.jpg" alt="A lazy cat" /></li>
  </ul>
</div>

#lazy-marquee.marquee(style='height: 10rem;')
  ul.marquee__list
    li.marquee__item
      img.marquee__img(data-lazyMarqueeSrc='/img/marquee/lazyDog.jpg' alt='A lazy dog')
    li.marquee__item
      img.marquee__img(data-lazyMarqueeSrc='/img/marquee/lazyWolf.jpg' alt='A lazy wolf')
    li.marquee__item
      img.marquee__img(data-lazyMarqueeSrc='/img/marquee/lazyCat.jpg' alt='A lazy cat')

initMarquee( 'lazy-marquee' );