Carousels

The carousel components come with their own built-in script, so make sure there are no class or variable conflicts with other components. If you are only using components from this library, you shouldn’t encounter any issues.

To implement it, import the Carousel component into your Astro page or component, and wrap it in a div with your desired dimensions; the carousel size will depend on that container. Finally, edit the images and paths directly inside the Carousel component.

src/components/Projects.astro

---
// Import
import Carousel from "../components/Carousel.astro";
---
(...)
<div class="Type your container dimensions here">
  <Carousel />
</div>
(...)

---

1. Automatic carousel

Adjust the time interval and image paths so the carousel runs automatically without requiring any user interaction.

Preview

Code

src/components/AutoCarousel.astro

 ---
 //2 Instructions in this component

 // ↓ Here you can add the images/slides. ❶
 const slides = [
   { src: "/src/assets/images/Lorem.jpg", alt: "First image" },
   { src: "/src/assets/images/Lorem.jpg", alt: "Second image" },
   { src: "/src/assets/images/Lorem.jpg", alt: "Third image" },
 ];

 // Here you can change the interval time (milliseconds). ❷
 const intervalTime = 5000;

 ---

 <div class="flex overflow-hidden w-full">
   <div
     id="carousel1"
     data-interval={intervalTime}
     class="flex transition-transform duration-500 ease-in-out"
   >
     <!-- Images -->
     {
       slides.map((slide, i) => (
         <div class="w-full flex-shrink-0 p-6">
           <img
             src={slide.src}
             alt={slide.alt}
             class="w-full h-auto object-cover rounded-xl"
           />
         </div>
       ))
     }
   </div>
 </div>

 <!-- Script to translate de element -->

 <script>
   const carousel1 = document.getElementById("carousel1");
   const carouselInterval1 = carousel1.dataset.interval;
   let carouselIndex1 = 0;
   const totalSlides1 = carousel1.children.length;

   setInterval(() => {
     carouselIndex1 = (carouselIndex1 + 1) % totalSlides1;
     carousel1.style.transform = `translateX(-${100 * carouselIndex1}%)`;
   }, carouselInterval1);
 </script>

---

2. Carousel with buttons

Add navigation controls so the user can manually move forward or backward between slides. Adjust the image paths and customize the button styles to match your project’s design.

Preview

Code

src/components/CarouselButtons.astro

   ---
   //1 Instruction in this component

   // ↓ Here you can add the images/slides. ❶
   const slides = [
     { src: "/src/assets/images/Lorem.jpg", alt: "First image" },
     { src: "/src/assets/images/Lorem.jpg", alt: "Second image" },
     { src: "/src/assets/images/Lorem.jpg", alt: "Third image" },
   ];
   ---

   <!-- Carousel -->

   <div class="flex relative overflow-hidden w-full text-white/80">
     <div
       id="carousel"
       class="flex transition-transform duration-500 ease-in-out p-4 space-x-8"
     >
       {
         slides.map((slide) => (
           <div class="w-full flex-shrink-0">
             <img
               src={slide.src}
               alt={slide.alt}
               class="w-full h-auto object-cover rounded-xl filter"
             />
           </div>
         ))
       }
     </div>

     <!-- Buttons -->

     <div
       id="prevBtn"
       class="absolute overflow-hidden left-0 top-0 h-full w-[20%] flex justify-start items-center group"
     >
       <button
         class="flex justify-center items-center size-12 -translate-x-full group-hover:translate-x-0 bg-black/90 backdrop-blur-xs cursor-pointer transition-transform duration-100 ease-in-out rounded-full"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           stroke-width="1"
           stroke="currentColor"
           class="size-6"
         >
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
             d="M15.75 19.5 8.25 12l7.5-7.5"></path>
         </svg>
       </button>
     </div>

     <div
       id="nextBtn"
       class="absolute overflow-hidden right-0 top-0 h-full w-[20%] flex justify-end items-center group"
     >
       <button
         class="flex justify-center items-center size-12 translate-x-full group-hover:translate-x-0 bg-black/90 backdrop-blur-xs cursor-pointer transition-transform duration-100 ease-in-out rounded-full"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           stroke-width="1"
           stroke="currentColor"
           class="size-6"
         >
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
             d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
         </svg>
       </button>
     </div>
   </div>

   <!-- Script -->

   <script>
     const nextBtn = document.getElementById("nextBtn");
     const prevBtn = document.getElementById("prevBtn");
     const carousel = document.getElementById("carousel");

     let carouselIndex = 0;
     const totalSlides = carousel.children.length;

     nextBtn.addEventListener("click", () => {
       carouselIndex = (carouselIndex + 1) % totalSlides;
       carousel.style.transform = `translateX(-${100 * carouselIndex}%)`;
     });

     prevBtn.addEventListener("click", () => {
       carouselIndex = (carouselIndex - 1 + totalSlides) % totalSlides;
       carousel.style.transform = `translateX(-${100 * carouselIndex}%)`;
     });
   </script>

---

3. Hybrid Carousel

Combine manual navigation with automatic sliding for a more dynamic carousel experience. Adjust the image paths, time interval, and button styles to fit your project’s design, allowing users to navigate between slides or let the carousel play automatically.

Preview

Code

src/components/HybridCarousel.astro

 ---
 //2 Instruction in this component

 // ↓ Here you can add the images/slides. ❶
 const slides = [
   { src: "/src/assets/images/Lorem.jpg", alt: "First image" },
   { src: "/src/assets/images/Lorem.jpg", alt: "Second image" },
   { src: "/src/assets/images/Lorem.jpg", alt: "Third image" },
 ];

 // Here you can change the interval time (milliseconds). ❷
 const intervalTime = 5000;
 ---

 <!-- Carousel -->
 <div class="flex relative overflow-hidden w-full text-white/80">
   <div
     id="carousel3"
     data-interval={intervalTime}
     class="flex transition-transform duration-500 ease-in-out p-4 space-x-8"
   >
     {
       slides.map((slide) => (
         <div class="w-full flex-shrink-0">
           <img
             src={slide.src}
             alt={slide.alt}
             class="w-full h-auto object-cover rounded-xl filter"
           />
         </div>
       ))
     }
   </div>

   <!-- Buttons -->

   <div
     id="prevBtn3"
     class="absolute overflow-hidden left-0 top-0 h-full w-[20%] flex justify-start items-center group"
   >
     <button
       class="flex justify-center items-center size-12 md:-translate-x-full group-hover:translate-x-0 bg-black/90 backdrop-blur-xs cursor-pointer transition-transform duration-100 ease-in-out rounded-full"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke="currentColor"
         class="size-6"
       >
         <path
           stroke-linecap="round"
           stroke-linejoin="round"
           d="M15.75 19.5 8.25 12l7.5-7.5"></path>
       </svg>
     </button>
   </div>

   <div
     id="nextBtn3"
     class="absolute overflow-hidden right-0 top-0 h-full w-[20%] flex justify-end items-center group"
   >
     <button
       class="flex justify-center items-center size-12 md:translate-x-full group-hover:translate-x-0 bg-black/90 backdrop-blur-xs cursor-pointer transition-transform duration-100 ease-in-out rounded-full"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke="currentColor"
         class="size-6"
       >
         <path
           stroke-linecap="round"
           stroke-linejoin="round"
           d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
       </svg>
     </button>
   </div>
 </div>

 <!-- Script -->

 <script>
   const nextBtn3 = document.getElementById("nextBtn3");
   const prevBtn3 = document.getElementById("prevBtn3");
   const carousel3 = document.getElementById("carousel3");

   let carouselIndex3 = 0;
   const totalSlides3 = carousel3.children.length;
   const carouselInterval3 = carousel3.dataset.interval;

   setInterval(() => {
     carouselIndex3 = (carouselIndex3 + 1) % totalSlides3;
     carousel3.style.transform = `translateX(-${100 * carouselIndex3}%)`;
   }, carouselInterval3);

   nextBtn3.addEventListener("click", () => {
     carouselIndex3 = (carouselIndex3 + 1) % totalSlides3;
     carousel3.style.transform = `translateX(-${100 * carouselIndex3}%)`;
   });

   prevBtn3.addEventListener("click", () => {
     carouselIndex3 = (carouselIndex3 - 1 + totalSlides3) % totalSlides3;
     carousel3.style.transform = `translateX(-${100 * carouselIndex3}%)`;
   });
 </script>

---

4. Logo Carousel

Create a seamless logo carousel with continuous scrolling to showcase brands in a clean and modern way. Adjust the speed, direction, and spacing of the logos to match your project’s design. The carousel runs automatically in an infinite loop, drawing attention without requiring user interaction, while keeping the layout lightweight and responsive.

Preview

Code

src/components/LogoCarousel.astro

 ---
 //3 Instruction in this component

 import { Image } from "astro:assets";

 // ↓ Here you can add the images/logos. ❶
 import Logo1 from "../../../assets/icons/planckstar.svg";
 import Logo2 from "../../../assets/icons/planckstar.svg";
 import Logo3 from "../../../assets/icons/planckstar.svg";

 // ↓ Then add the logos you imported with an alt description. ❷
 const logosRoutes = [
   {
     src: Logo1,
     alt: "Logo 1",
   },
   {
     src: Logo2,
     alt: "Logo 2",
   },
   {
     src: Logo3,
     alt: "Logo 3",
   },
 //{
 //   src: LogoX,
 //   alt: "Logo X",
 //}
 ];
 ---

 <div
   class="relative w-full overflow-hidden border-y border-white/30 py-8 flex items-center not-content"
 >
   <div class="w-full">
     <!-- Here you can change the interval time ↓ (seconds). ❸ -->
     <div class=`flex w-[200%] animate-[scroll_5s_linear_infinite]`>
       <div class="flex w-1/2 items-center justify-around">
         {
           logosRoutes.map((logo) => (
             <Image src={logo.src} alt={logo.alt} class="size-16" />
           ))
         }
       </div>
       <div class="flex w-1/2 items-center justify-around">
         {
           logosRoutes.map((logo) => (
             <Image src={logo.src} alt={logo.alt} class="size-16" />
           ))
         }
       </div>
     </div>
   </div>
 </div>

 <style>
   @keyframes scroll {
     0% {
       transform: translateX(0%);
     }
     100% {
       transform: translateX(-50%);
     }
   }
 </style>