Commentary

The carousel is a simple horizontal all CSS display bar for images. CSS grid is used to display these images; no javascript required. Nothing fancy, but can also be used for mobile devices.

The .carousel-wrapper class defines the parent container section element and sets up the grid. A heading tag, visible only to screen readers, is required for a section. The .carousel class controls the horizontal display of images. The .no-scrollbar class is an optional modifier that hides the bottom scrollbar.

The variable --carousel-image-height sets the images height and --carousel-image-width is set to an aspect ratio of 4 x 3 (default). The images are set to cover the carousel image area and so the image overflow will be hidden. This results in uniform image sizing.

Usage

Classes:
.carousel-wrapper Defines a parent grid div.
.carousel Main body of carousel that holds a ul list of images.
.no-scrollbar Optional modifier that removes bottom scroll bar.
Dependencies:
File: carousel.css
Variables: --bg-main-ter, --carousel-image-height, --carousel-image-widtht, --gutter, --mar-ver, --pad-horz ,--radius

Examples

Carousel with Scroll Bar

Carousel Example

  • Northern lights over forest
  • Courtyard bordered by trees
  • Man repairing bicycle
  • Girl with ballons at night
  • Lake with birds and tree reflections
  • Field with mature trees
  • Empty highway bordered by trees
  • Courtyard bordered by trees

Carousel no Scroll Bar

Carousel Example

  • Northern lights over forest
  • Courtyard bordered by trees
  • Man repairing bicycle
  • Girl with ballons at night
  • Lake with birds and tree reflections
  • Field with mature trees
  • Empty highway bordered by trees
  • Courtyard bordered by trees

        <section class="carousel-wrapper">
            <h4 class="sr-only">Carousel Example</h4>
            <div class="carousel">
                <ul class="[no-scrollbar]">
                    <li><img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/main7.jpg" alt="Northern lights over forest"></li>
                    <li><img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/main6.jpg" alt="Courtyard bordered by trees"></li>
                    <li><img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/main8.jpg" alt="Man repairing bicycle"></li>
                    <li><img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-demo.jpg" alt="Girl with ballons at night"></li>
                    <li><img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/main1.jpg" alt="Lake with birds and tree reflections"></li>
                    <li><img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/main3.jpg" alt="Field with mature trees"></li>
                    <li><img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/main4.jpg" alt="Empty highway bordered by trees"></li>
                    <li><img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/main6.jpg" alt="Courtyard bordered by trees"></li>
                </ul>
            </div>
        </section>