Styleguide

Image Carousel

Example


Multi Image Carousel


A couple of walrus relaxing to the max.
alt text
alt text
alt text
alt text

Single Image Carousel


A couple of walrus relaxing to the max.

A couple of walrus relaxing to the max.

A wizard sitting by a portal they created with a sling ring.

A wizard sitting by a portal they created with a sling ring.

A pair of hands on a piano.

A pair of hands on a piano.

A barista pours hot water from a Kalita® kettle into a Chemex® Classic Pour Over coffee maker.

A barista pours hot water from a Kalita® kettle into a Chemex® Classic Pour Over coffee maker.

Super boring photo of hay bales in a field.

Super boring photo of hay bales in a (boring) field.

Code

HTML

/* We're using a lightweight carousel library called Flickity:
https://flickity.metafizzy.co/ */
<link
  rel="stylesheet"
  href="https://unpkg.com/flickity@2/dist/flickity.min.css"
/>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<h3>Multi Image Carousel</h3>
<br />
<div class="carousel-wrapper">
  <div
    class="main-carousel"
    data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true }'
  >
    <div class="item">
      <img src="https://picsum.photos/id/237/516/344" alt="alt text" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/320/516/344" alt="alt text" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/238/230/344" alt="alt text" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/239/516/344" alt="alt text" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/240/516/344" alt="alt text" />
    </div>
  </div>
</div>
<br />

<h3>Single Image Carousel</h3>
<br />
<div class="carousel-wrapper">
  <div class="main-carousel full" data-flickity='{ "fullscreen": true, "wrapAround": true }'>
    <div class="item">
      <img
        src="https://picsum.photos/id/1084/750/500?grayscale"
        alt="A couple of walrus relaxing to the max."
      />
      <p class="caption">A couple of walrus relaxing to the max.</p>
    </div>
    <div class="item">
      <img
        src="https://picsum.photos/id/1079/750/500?grayscale"
        alt="A wizard sitting by a portal they created with a sling ring."
      />
      <p class="caption">
        A wizard sitting by a portal they created with a sling ring.
      </p>
    </div>
    <div class="item">
      <img
        src="https://picsum.photos/id/1082/750/500?grayscale"
        alt="A pair of hands on a piano."
      />
      <p class="caption">A pair of hands on a piano.</p>
    </div>
    <div class="item">
      <img
        src="https://picsum.photos/id/1060/750/500?grayscale"
        alt="A barista pours hot water from a Kalita® kettle into a Chemex® Classic Pour Over coffee maker."
      />
      <p class="caption">
        A barista pours hot water from a Kalita® kettle into a Chemex® Classic
        Pour Over coffee maker.
      </p>
    </div>
    <div class="item">
      <img
        src="https://picsum.photos/id/300/750/500?grayscale"
        alt="Super boring photo of hay bales in a field."
      />
      <p class="caption">
        Super boring photo of hay bales in a (boring) field.
      </p>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

CSS

.carousel-wrapper {
  margin-bottom: 1.625rem;
  position: relative;
}

.main-carousel .item {
  display: table;
  height: 344px;
  margin-right: 0.625rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.main-carousel.full .item {
  height: 500px;
  margin-right: 0.625rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.main-carousel.full.is-fullscreen .item {
  height: 100%;
}

.main-carousel .item img {
  display: block;
  max-height: 100%;
}

.main-carousel.full .item .caption {
  border-bottom: 1px solid #131516;
  font-size: 0.75rem;
  margin: 0.625rem auto;
  max-width: 750px;
  padding-bottom: 0.625rem;
  width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

Usage


All carousel options can be seen here.

← Link Boxes →