The following CSS classes offer more display options depending upon the slide image. They also afford responsiveness (i.e., viewability at various display sizes) and accessibility.
Slide title
On larger displays, this text will overlay the image. It moves above or below the image at smaller viewports (e.g., phones).
- title-hide
- Hides the title offscreen. It is still there for a screenreader, but not visually present.
- title-right
- Aligns the title to the right.
- title-left
- (DEFAULT) Aligns the title to the left.
- title-smaller
- Shrinks the title a bit.
- title-bigger
- Enlarges the title a bit.
- title-lower
- Displays the title near the bottom of the slide.
Slide description
Sometimes the image begs for an overt description and, perhaps, a link into the originating digital collection.
- desc-hide
- Hides the description offscreen. It is still there for a screenreader, but not visually present.
- desc-left
- (DEFAULT) Aligns the title to the left.
- desc-right
- Aligns the title to the right.
- desc-full-width
- Stretches the description all the way across the image and aligns in the center by default.
- desc-bottom
- Aligns the description to the bottom of the image. NOTE: This will overlap with the default display of an image description.
Slide image description
- img-desc-hide
- (DEFAULT) Hides the image description offscreen. It is still there for a screenreader, but not visually present.
- img-desc-show
- Shows the image description onscreen.
- img-desc-left
- (DEFAULT) Aligns the image description to the left.
- img-desc-right
- Aligns the title to the right.
- img-desc-full-width
- Stretches the image description all the way across the image and aligns in the center by default.
- img-desc-bottom
- (DEFAULT) Aligns the image description to the bottom of the image.
- img-desc-top
- Aligns the image description to the top of the image.
Navigation
Comes in two forms: previous/next buttons and progress dots (not implemented, yet). Navigation only makes sense when two or more slides are enabled. Because of this, it is disabled by default and can be enabled via the following classes.
- nav-pn-hide
- (NOT implemented, yet) Hides the previous and next buttons.
- nav-pn-show
- (NOT implemented, yet) (DEFAULT) Shows the previous and next buttons if there is more than one slide.
Covers
Covers add a pattern on top of the image. It is basically a transparent image on top of your primary image. The benefits are 1) It can darken a very bright image for greater contrast and 2) It can hide some image compression artifacts without blurring the image.
- cover-pattern-screendoor
- [description and example]
- cover-pattern-gridpaper
- [description and example]