up

2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md

@@ -0,0 +1,17 @@
+The images ribbon can be represented as `ul/li` list of images `<img>`.
+
+Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visibble:
+
+![](carousel1.png)
+
+To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
+
+For `<img>` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it.
+
+To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
+
+![](carousel2.png)
+
+The outer `<div>` has a fixed width, so "extra" images are cut.
+
+The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `<div class="carousel">` and style things inside it.