Skip to content Paweł Grzybek

A simple carousel with a few lines of CSS

Published: · 1 minute read

A few years back, I built Siema — a lightweight (only 3kb gzipped) carousel plugin with no dependencies. It became massively popular because of its simplicity and extensibility. I’m proud of this project because not only helped me but also many other developers.

CSS nowadays is so powerful, and if you need a simple carousel, I would like to kindly ask you not to use Siema (or any other carousel library) anymore. Using CSS is more straightforward, accessible, feels more natural and the browser support for scroll snap is great. Have a look at this minimalistic example.

ul {
  display: flex;
  list-style: none;
  overflow: auto;
  scroll-snap-type: x mandatory;
}

li {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
}

See the Pen Super simple CSS carousel by Pawel Grzybek (@pawelgrzybek) on CodePen.

This article is just a quick note to my future self to come here and copy/paste what I need, but if you found it useful, I am super happy. I can assure you that the next major release of Siema will come with a lot less JavaScript (0kb). Bye 👋

Comments

  • F
    Florian
    , #c4c89f2a

    I guess it‘s not a full replacement for Siema if you think about:

    • prev/next with buttons
    • automatically moving to the next slide after a delay

    How would you do that?

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek
      , #63cf3a18

      Yeah I know it isn't a direct replacement, thats why I said " if you need a simple carousel". There is an API t interact with scrollable areas, but I don't know it yet. One day maybe I will write a post about it. Good suggestion!

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
      • F
        Florian
        , #c9c75f06

        Thanks! I guess you could come up with a light weight version of Siema that makes use of scroll snap but also provides programmatic controls. All it’d do is to change the scroll position and the browser would do the rest :)

        👆 you can use Markdown here

        Your comment is awaiting moderation. Thanks!
  • T
    Taofeek
    , #815e6b5b

    I think this is awesome. I will also take my time to understand it and determine the possibility of buttons without without unnecessary complicating the code.

    Well done.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
  • C
    Cleber Sant'ana
    , #617d7c20

    Argyle Adam, in his GUI Challenges series, made a carousel using CSS scroll snapping. His demo page has maaany variants, most with buttons and other means of interacting with the carousel.

    https://gui-challenges.web.app/carousel/dist/

    I haven't really checked the source yet, but it seems he just used simple javascript to code those interactions

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
  • J
    James Catt
    , #3f87bed7

    Nice, but you might want to add some things to make keyboard-accessible:

    <ul tabindex="0" aria-label="Scrollable list">

    aria-label is just in case screen reader users are wondering why it's focusable.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek
      , #4d425dca

      Wait a sec. Is it still going to be focusable after adding tabindex="0" ?

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
      • J
        James Catt
        , #e2d626ef

        It's not focusable now. Adding the tabindex="0" is so that it will be.

        👆 you can use Markdown here

        Your comment is awaiting moderation. Thanks!

Leave a comment

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!