CSS only Image Scroller

Question

i have the below html and css code. i am trying to achieve a scrollable row of images without javascript. with the code below, when the left or right button is clicked, the initial row of images should disappear and be replaced with a new row of images. appreciate all inputs and thanks in advance

html

<h4 style="text-align: center; margin-top: 100px;">WE THINK YOU'D LIKE..</h4>
      <div class="carousel-container">
        <img src="aspect images/arrow left.png" width="50px" style="margin-bottom: 40px; margin-right: -20px;">
        <div class="carousel-wrapper">
          <img src="aspect images/lily of the valley.png" width="250" alt="Lily of the Valley">
          <div class="item-details">
            <p>Lily of the Valley<br>$65.00</p>
            <img src="aspect images/plus_button.png" alt="Add to cart">
          </div>
        </div>
        <div class="carousel-wrapper">
          <img src="aspect images/Sundial Portulaca.png" width="250" alt="Sundial Portulaca">
          <div class="item-details">
            <p>Sundial Portulaca<br>$45.00</p>
            <img src="aspect images/plus_button.png" alt="Add to cart">
          </div>
        </div>
        <div class="carousel-wrapper">
          <img src="aspect images/Iris Snow Queen.png" width="250" alt="Iris Snow Queen">
          <div class="item-details">
            <p>Iris Snow Queen<br>$85.00</p>
            <img src="aspect images/plus_button.png" alt="Add to cart">
          </div>
        </div>
        <div class="carousel-wrapper">
          <img src="aspect images/Gold Hibiscus.png" width="250" alt="Gold Hibiscus">
          <div class="item-details">
            <p>Gold Hibiscus<br>$55.00</p>
            <img src="aspect images/plus_button.png" alt="Add to cart">
          </div>
        </div>
        <div class="carousel-wrapper">
          <img src="aspect images/Sunset Poppies.png" width="250" alt="Sunset Poppies">
          <div class="item-details">
            <p>Sunset Poppies<br>$75.00</p>
            <img src="aspect images/plus_button.png" alt="Add to cart">
          </div>
        </div>
        <img src="aspect images/arrow right.png" width="50px" style="margin-bottom: 40px; margin-left: -20px;">
      </div>

css

.carousel-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 30px;
      }
      
      .carousel-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      .carousel-wrapper img {
        border-radius: 10px;
        overflow: hidden;
        width: 200px;
      }
      
      .carousel-wrapper p {
        margin-top: 10px;
        text-align: left;
        align-self: flex-start;
      }
      
      .item-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 200px;
        margin-top: 10px;
      }
      
      .item-details p {
        margin: 0;
        text-align: left;
        font-weight: bold;
      }
      
      .item-details img {
        width: 30px;
      }
      
      .item-details img:last-of-type {
        margin-left: 10px;
      }

This is not possible, you need JavaScript for this. Regardless, it is not a good idea to implement nasty CSS hacks into your code anyway. — Aaron3219, Apr 02 '23 at 20:48
Are you wanting several images to show at first, and then them all to be replaced with a second set? And is there then a third/fourth... set(s) or just the two. — A Haworth, Apr 02 '23 at 22:10

Brett Donald · Accepted Answer · 2023-04-04T00:22:53.563

Perhaps CSS scroll snapping is what you are looking for?

let activeIndex = 0;
const container = document.querySelector(".d1");
const elements = [...document.querySelectorAll(".d1>div")];

function handleIntersect(entries){
  const entry = entries.find(e => e.isIntersecting);
  if (entry) {
    const index = elements.findIndex(
      e => e === entry.target
    );
    activeIndex = index;
  }
}

const observer = new IntersectionObserver(handleIntersect, {
  root: container,
  rootMargin: "0px",
  threshold: 0.75
});

elements.forEach(el => {
  observer.observe(el);
});

function goPrevious() {
  if(activeIndex > 0) {
    elements[activeIndex - 1].scrollIntoView({
      behavior: 'smooth'
    })
  }
}

function goNext() {
  if(activeIndex < elements.length - 1) {
    elements[activeIndex + 1].scrollIntoView({
      behavior: 'smooth'
    })
  }
}

document.getElementById('left').addEventListener('click', goPrevious)
document.getElementById('right').addEventListener('click', goNext)

body {
  margin: 1em;
}
.d1 {
  display: flex;
  margin: 0 -1em;
  padding: 0 1em 1em 1em;
  gap: 1em;
  overflow: auto;
  scroll-snap-type: x mandatory;
}
.d1>div {
  display: flex;
  gap: 1em;
  border: 2px solid red;
  scroll-snap-align: center;
  padding: 2px;
}
.d1 img {
  width: 25vw;
}

<p>Lorem ipsum</p>
<div class="d1">
  <div>
    <img src="https://picsum.photos/id/11/250">
    <img src="https://picsum.photos/id/12/250">
    <img src="https://picsum.photos/id/13/250">
  </div>
  <div>
    <img src="https://picsum.photos/id/14/250">
    <img src="https://picsum.photos/id/15/250">
    <img src="https://picsum.photos/id/16/250">
  </div>
  <div>
    <img src="https://picsum.photos/id/17/250">
    <img src="https://picsum.photos/id/18/250">
    <img src="https://picsum.photos/id/19/250">
  </div>
  <div>
    <img src="https://picsum.photos/id/20/250">
    <img src="https://picsum.photos/id/21/250">
    <img src="https://picsum.photos/id/22/250">
  </div>
</div>
<p>
  <button id="left">Left</button>
  <button id="right">Right</button>
</p>
<p>Lorem ipsum</p>

is there a way to include left and right buttons to slide instead of scrolling horizontally? — deandrehaijiel, Apr 03 '23 at 08:16
It's a bit difficult to have button actions which scroll to the snap points, but [here are some ideas](https://stackoverflow.com/q/57518428/2518285) from what others have done. — Brett Donald, Apr 03 '23 at 21:58
I updated my answer to include the code from [this answer](https://stackoverflow.com/a/58386348/2518285) to demonstrate working previous and next buttons. — Brett Donald, Apr 04 '23 at 00:23

CSS only Image Scroller

1 Answers1