Davidson Styleguide

Carousel 

<div class="carousel carousel--single">
    <div class="block ">
        <div class="block__content">
            <figure>
                <img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" />
                <figcaption>
                    <p class="">
                        <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
                    </p>
                    <cite>Alfred E. Newman</cite>
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="block ">
        <div class="block__content">
            <figure>
                <img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" />
                <figcaption>
                    <p class="">
                        <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
                    </p>
                    <cite>Alfred E. Newman</cite>
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="block ">
        <div class="block__content">
            <figure>
                <img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" />
                <figcaption>
                    <p class="">
                        <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
                    </p>
                    <cite>Alfred E. Newman</cite>
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="block ">
        <div class="block__content">
            <figure>
                <img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" />
                <figcaption>
                    <p class="">
                        <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
                    </p>
                    <cite>Alfred E. Newman</cite>
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="block ">
        <div class="block__content">
            <figure>
                <img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" />
                <figcaption>
                    <p class="">
                        <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
                    </p>
                    <cite>Alfred E. Newman</cite>
                </figcaption>
            </figure>
        </div>
    </div>
</div>
 
<div class="carousel {{ carousel.variant }}">
    {% for pane in carousel.panes %}
        {% include '@block' with { block: pane.block, figure: pane.figure, cite: pane.cite, p: pane.p, image: pane.image } %}
    {% endfor %}
</div>
 
{
  "carousel": {
    "variant": "carousel--single",
    "panes": [
      {
        "block": {
          "pattern": "@figure"
        },
        "figure": {
          "media": "@image"
        },
        "p": {
          "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
        },
        "cite": {
          "citation": "Alfred E. Newman"
        },
        "image": {
          "ratio": "4:3",
          "width": 800,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "davidson"
        }
      },
      {
        "block": {
          "pattern": "@figure"
        },
        "figure": {
          "media": "@image"
        },
        "p": {
          "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
        },
        "cite": {
          "citation": "Alfred E. Newman"
        },
        "image": {
          "ratio": "4:3",
          "width": 800,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "davidson"
        }
      },
      {
        "block": {
          "pattern": "@figure"
        },
        "figure": {
          "media": "@image"
        },
        "p": {
          "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
        },
        "cite": {
          "citation": "Alfred E. Newman"
        },
        "image": {
          "ratio": "4:3",
          "width": 800,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "davidson"
        }
      },
      {
        "block": {
          "pattern": "@figure"
        },
        "figure": {
          "media": "@image"
        },
        "p": {
          "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
        },
        "cite": {
          "citation": "Alfred E. Newman"
        },
        "image": {
          "ratio": "4:3",
          "width": 800,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "davidson"
        }
      },
      {
        "block": {
          "pattern": "@figure"
        },
        "figure": {
          "media": "@image"
        },
        "p": {
          "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
        },
        "cite": {
          "citation": "Alfred E. Newman"
        },
        "image": {
          "ratio": "4:3",
          "width": 800,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "davidson"
        }
      }
    ]
  }
}
  • Content: 
    // Carousel styles are set in the slick theme file

.carousel {
    background: color(gray-lightest);
    margin-bottom: rr-gridbase(4);
    max-width: calc(100vw - 64px);
}

.slick-slide {
    position: relative;
    z-index: 1;
    background: color(davidson-red);
    // transform: scale(0.9);
    transition: all $transition-time $transition-easing;
    figure {
        padding-bottom: 0;
        img {
            opacity: 0.46;
            transition: all $transition-time $transition-easing;
            position: relative;
        }
        figcaption {
            background: color(gray-lightest);
            border: 0;
            margin-top: 0;
            padding: rr-gridbase(3) rr-gridbase(2);
            // transform: scale(2);
            transition: all $transition-time $transition-easing;
            & > * {
                opacity: 0;
                transition: all $transition-time $transition-easing;
            }
        }
    }

    &.slick-current {
        z-index: 2;
        // transform: scale(1.05);
        // margin-top: rem(30px);
        figure {
            img {
                opacity: 1;
            }
            figcaption {
                // transform: scale(1);
                & > * {
                    opacity: 1;
                }
            }
        }
    }
}
  • URL: /components/raw/carousel/carousel.scss
  • Filesystem Path: patterns/organisms/interactive/carousel/carousel.scss
  • Size: 1.3 KB
  • Content: 
    /* This demonstrates initializing the ambient video; the final 
   script should not be included in an integrated project. */

document.addEventListener('DOMContentLoaded', () => {
  carousel();
});
  • URL: /components/raw/carousel/carousel-init.js
  • Filesystem Path: patterns/organisms/interactive/carousel/carousel-init.js
  • Size: 198 Bytes
  • Content: 
    const carousel_single = {
    cssEase: 'ease-in-out',
    dots: true,
    lazyLoad: 'progressive'
}

const carousel_center = {
    cssEase: 'ease-in-out',
    lazyLoad: 'progressive',
    centerMode: true,
    dots: true,
    centerPadding: '110px',
    sidesToShow: 3,
    arrows: true,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                centerMode: false,
                slidesToShow: 1
            }
        },
        {
            breakpoint: 480,
            settings: {
                centerMode: false,
                slidesToShow: 1
            }
        }
    ]        
}

const carousel = () => {
    $ = jQuery;
    const $carousels = $('.carousel');
    let config = carousel_center; // default configuration
    if ($carousels.length < 1) return;

    const positionArrowsSingle = (slick) => {
        let buttonTop = slick.slideWidth * .4;
        let buttons = slick.$nextArrow.add(slick.$prevArrow);
        buttons.css({ top: buttonTop });
    }

    const positionArrowsCentered = (slick) => {
        const $currentSlide = $(slick.$slides[slick.currentSlide]);
        const imgHeight = $currentSlide.find('img').height();
        if (imgHeight > 0) {
            const buttonTop = imgHeight * .5;
            const buttons = slick.$nextArrow.add(slick.$prevArrow);
            buttons.css({ top: buttonTop });
        }
    }

    $carousels.on('lazyLoaded', (e, slick,image,imageSource) => {
        
    });
    $carousels.on('init setPosition afterChange', (e,slick) => {
        if ($(e.currentTarget).has('.carousel--single')) {
            positionArrowsSingle(slick);
        }
        if ($(e.currentTarget).has('.carousel--center')) {
            positionArrowsCentered(slick);
        }
    });
    $carousels.map((index,elem) => {
        // override configuration based on class name
        if (elem.classList.contains('carousel--center')) {
            config = carousel_center;
        }
        $(elem).slick(config);
    });
}
  • URL: /components/raw/carousel/carousel.js
  • Filesystem Path: patterns/organisms/interactive/carousel/carousel.js
  • Size: 2 KB

Carousels are a series of divs which are turned into slides. This was designed to use the “media with caption” component. Other components might work but compatibility might require some tweaking. Carousels can present some challenging UX and accessibility issues and their use should be limited, especially if all of the content in the carousel is important.

There are two styles provided:

  • carousel--single: One slide fills the available space
  • carousel--center: Previous and next carousels peak out of the edge on screens > large; medium and small screen treatment is similar to carousel--single