Scroll-Snap Image Carousel

Elevate user interaction on your website with a scroll-snap image carousel. Learn how to implement a carousel that provides seamless scrolling and captivating image transitions.

A scroll-snap image carousel provides a smooth scrolling experience with snapping behavior, making it an attractive and user-friendly way to showcase multiple images on your website. This tutorial will guide you through creating and customizing a scroll-snap image carousel using HTML and CSS.

Step 1: Copy the Code Snippet

  • Begin by copying the provided HTML and CSS code snippets. This includes the structure and styles required to create a functional scroll-snap image carousel.

Step 2: Link CSS

  • Ensure the styles.css file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles: 
    <link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

To make the scroll-snap image carousel your own, you can customize various aspects such as:

  • Images: Replace the src attributes with the paths to your own images.
  • CSS Styles: Adjust the styles in styles.css to change dimensions, colors, and other properties to match your website's design.

By following these steps, you can implement and personalize a scroll-snap image carousel using HTML and CSS, enhancing the visual appeal and user experience on your website.

Code Explanation

HTML Code

Section Container:
<section class="carousel">
  • Defines a section element with the class carousel, which serves as the main container for the carousel.
Ordered List (Viewport):
<ol class="carousel__viewport">
  • An ordered list (<ol>) with the class carousel__viewport, which acts as the viewport for the carousel slides.
List Items (Slides):
<li class="carousel__slide">
  • Each list item (<li>) within the ordered list represents an individual slide in the carousel, with the class carousel__slide.
Slide Content (Snapper):
<div class="carousel__snapper" style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/1.jpg')"></div>
  • Inside each list item, there is a div with the class carousel__snapper.
  • The style attribute sets the background image for the slide. Each slide has a different background image URL.
Additional Slides:
  • The structure for additional slides is the same as the first slide, with different background image URLs.
  • Example:
<li class="carousel__slide">
  <div class="carousel__snapper" style="background-image: url('https://raw.githubusercontent.com/frontend-joe/css-carousels/main/carousel-2/2.jpg')"></div>
</li>
Closing Tags:
</ol>
</section>
  • Closes the ordered list and section elements.

CSS Code

Body Styling:
body {
  display: grid;
  place-items: center;
  margin: 0;
  height: 100vh;
  padding: 0 50px;
}
  • Centers the content using CSS Grid.
  • Ensures the body occupies the full viewport height.
  • Adds horizontal padding for spacing.
Universal Selector *:
* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}
  • Applies box-sizing: border-box to all elements.
  • Hides scrollbars by setting their color to transparent and width to 0px.
Scrollbar Customization (Webkit):
*::-webkit-scrollbar {
  width: 0;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}
  • Hides scrollbars for webkit-based browsers (Chrome, Safari).
Hides Scrollbars (IE):
* {
  -ms-overflow-style: none;
}
  • Hides scrollbars for Internet Explorer.
Ordered List (ol) and List Item (li) Styling:
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
  • Removes default list styling (bullets, numbers) and margin/padding.
Carousel Container:
.carousel {
  position: relative;
  width: 100%;
  height: 30vh;
  perspective: 100px;
  overflow: hidden;
}
  • Sets relative positioning for the carousel.
  • Makes the carousel take full width and 30% of viewport height.
  • Applies a perspective for 3D effects.
  • Hides overflow content.
Carousel Viewport:
.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
  • Positions the viewport absolutely within the carousel.
  • Uses flexbox for horizontal layout.
  • Allows horizontal scrolling with smooth behavior and snap type.
Carousel Background Circles:
.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  translate: -50% 0;
  width: 500%;
  height: 500%;
  border-radius: 50%;
  background: #ffffff;
}
.carousel::before {
  top: -480%;
}
.carousel::after {
  bottom: -480%;
}
  • Adds large white circles before and after the carousel for visual effects.
  • Centers them horizontally and positions them above and below the carousel.
Carousel Slides:
.carousel__slide {
  position: relative;
  flex: 0 0 33.33%;
  width: 33.33%;
  counter-increment: item;
}
  • Positions each slide relatively.
  • Sets each slide to take one-third of the viewport width.
  • Increments a counter for each slide (for use in :before content).
Slide Numbering:
.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -40%, 70px);
}
  • Displays the slide number in the center of each slide using the counter.
Slide Snapper:
.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  background-size: cover;
  background-position: 50%;
  border: 10px solid #ffffff;
}
  • Ensures each slide snaps to the center during scrolling.
  • Sets background properties to cover and center the image.
  • Adds a white border around each slide.