Use CSS to build an interactive photo carousel.
A scrolling photo carousel can be a nice visual alternative to laying out photos on a grid in your Single Page Application. There are a multitude of pre-written CSS snippets on sites like CodePen that you can tailor to your particular functional and stylistic needs. For my example, I used “A CSS-only Carousel Slider,” from CodePen, courtesy of Christian Schaefer.
Before incorporating the CSS styling elements for my photo carousel, I had my photos laid out in a simple list format using the code below:
After incorporating the code from the snippet linked above, I had to alter my original code only slightly:
All of the <a> tags and <img> elements remain in tact, but the styling of these elements is affected by wrapping them in <div> elements with the className property connected to a given CSS style element:
For example, the className “slides” used in the HTML seen above, is directly tied to the CSS styling selectors pictured in the second screenshot. This class’s style is being altered by properties like “display” (the way the images are displayed in their container), “overflow-x” (how the content fits into the container on the x-axis, meaning a scroll motion moves through images in the same space), and “scroll-behavior” (smooth indicates that the images can be scrolled through with a track pad seamlessly).
Furthermore, className “slides” is being altered by ::-webkit-scrollbar .
This is what’s called a pseudo-element : a keyword added to a selector that styles a particular part of the element. In this case ::-webkit-scrollbar only affects scrollbar elements when the overflow property is set to scroll. This will usually trigger a graphic scrollbar display on the element when the user interacts with it, but in this case our display is set to none.
