• Home
• Case Studies
• Contact me
• About me

Carousel CSS Code Blank Template

Awhile ago I wrote a post about a PetsRPals Instagram carousel that I created as a part of a social media campaign to boost engagement with followers. Just so my website didn't look like a barren wasteland I put it in an animated carousel that mimicked what you'd see on Instagram while swiping. I created it with JavaScript and CSS code, and in this post I am sharing the CSS & JavaScript code I used to create that carousel and optimizing the rest of the post with JSON-LD. I did run into some issues as I am currently hosting on blogger, and it can be very finicky compared to WordPress (seriously, it's a horrible platform but I'm always up for a good challenge.)

I employed to help of ChatGPT and Gemini who are basically my full time assistants, I typically feed my code to them to review before putting it in here (I'm literally so thankful I don't have to stare at lines of code for hours on end ever again.)

I also had GitHub's co-pilot assist with real-time edits in Visual Studio. Which I would also recommend.

THIS IS CODE YOU CAN JUST COPY AND PASTE. IF FOR SOME REASON IT ISN'T WORKING, THROW IT INTO CLAUDE OR CHATHPT, GITHUB, GEMINI OR SOME OTHER COPILOT

Carousel CSS Code

<style>
.carousel {
  position: relative;
  max-width: 430px;
  margin: 32px auto;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px 14px 18px;
  background: #ffffff;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.carousel-dot.active {
  background: #1d4ed8;
  transform: scale(1.15);
}
</style>

Carousel HTML & JavaScript Code

<div class="carousel">
  <div class="carousel-track" id="carouselTrack">
    <div class="carousel-slide">
      <a href="<!-- ADD CLICKABLE IMAGE LINK HERE - FOR SOME SITES THIS WILL JUST BE THE SAME AS THE IMG SRC LINK BELOW  - RAE SORIA, SORIABIO.COM-->" target="_blank">
        <img src="<!-- ADD YOUR IMAGE SOURCE HERE & CLOSE SPACING - THIS MAY BE THE SAME AS THE A HREF LINK ABOVE -->" alt="<!-- ADD ALT TEXT HERE -->">
      </a>
    </div>

    <div class="carousel-slide">
      <a href="<!-- ADD CLICKABLE IMAGE LINK HERE - FOR SOME SITES THIS WILL JUST BE THE SAME AS THE IMG SRC LINK BELOW  - RAE SORIA, SORIABIO.COM-->" target="_blank">
        <img src="<!-- ADD YOUR IMAGE SOURCE HERE & CLOSE SPACING - THIS MAY BE THE SAME AS THE A HREF LINK ABOVE -->" alt="<!-- ADD ALT TEXT HERE -->">
      </a>
    </div>

    <div class="carousel-slide">
      <a href="<!-- ADD CLICKABLE IMAGE LINK HERE - FOR SOME SITES THIS WILL JUST BE THE SAME AS THE IMG SRC LINK BELOW  - RAE SORIA, SORIABIO.COM-->" target="_blank">
        <img src="<!-- ADD YOUR IMAGE SOURCE HERE & CLOSE SPACING - THIS MAY BE THE SAME AS THE A HREF LINK ABOVE -->" alt="<!-- ADD ALT TEXT HERE -->">
      </a>
    </div>

    <div class="carousel-slide">
      <a href="<!-- ADD CLICKABLE IMAGE LINK HERE - FOR SOME SITES THIS WILL JUST BE THE SAME AS THE IMG SRC LINK BELOW  - RAE SORIA, SORIABIO.COM-->" target="_blank">
        <img src="<!-- ADD YOUR IMAGE SOURCE HERE & CLOSE SPACING - THIS MAY BE THE SAME AS THE A HREF LINK ABOVE -->" alt="<!-- ADD ALT TEXT HERE -->">
      </a>
    </div>

    <div class="carousel-slide">
      <a href="<!-- ADD CLICKABLE IMAGE LINK HERE - FOR SOME SITES THIS WILL JUST BE THE SAME AS THE IMG SRC LINK BELOW  - RAE SORIA, SORIABIO.COM-->" target="_blank">
        <img src="<!-- ADD YOUR IMAGE SOURCE HERE & CLOSE SPACING - THIS MAY BE THE SAME AS THE A HREF LINK ABOVE -->" alt="<!-- ADD ALT TEXT HERE -->">
      </a>
    </div>
  </div>

  <div class="carousel-dots" id="carouselDots">
    <span class="carousel-dot active" data-slide="0"></span>
    <span class="carousel-dot" data-slide="1"></span>
    <span class="carousel-dot" data-slide="2"></span>
    <span class="carousel-dot" data-slide="3"></span>
    <span class="carousel-dot" data-slide="4"></span>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const track = document.getElementById("carouselTrack");
  const slides = document.querySelectorAll(".carousel-slide");
  const dots = document.querySelectorAll(".carousel-dot");

  let currentIndex = 0;
  let autoRotate;

  function updateCarousel() {
    track.style.transform = "translateX(-" + (currentIndex * 100) + "%)";
    dots.forEach(function (dot, index) {
      dot.classList.toggle("active", index === currentIndex);
    });
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    updateCarousel();
  }

  function startAutoRotate() {
    autoRotate = setInterval(nextSlide, 3000);
  }

  function stopAutoRotate() {
    clearInterval(autoRotate);
  }

  dots.forEach(function (dot) {
    dot.addEventListener("click", function () {
      currentIndex = parseInt(this.getAttribute("data-slide"), 10);
      updateCarousel();
      stopAutoRotate();
      startAutoRotate();
    });
  });

  updateCarousel();
  startAutoRotate();
});
</script>

View work Contact me