Slider

HTML

type Quote = {
  id: string;
  quote: string;
  author: string;
  tags: string[];
};

type Slide = {
  imageUrl: string;
  quote: Quote;
};

const TAGS = new Set([
  "Philosophy",
  "Self",
  "Inspiration",
  "Growth",
  "Success",
  "Happiness",
  "Perseverance",
  "Mindfulness",
  "Wisdom",
  "Courage",
  "Determination",
  "Positivity",
  "Leadership",
  "Life",
  "Motivation",
  "Achievement",
  "Gratitude",
  "Resilience",
  "Hope",
  "Empowerment",
  "Confidence",
  "Strength",
  "Focus",
  "Balance",
  "Purpose",
  "Vision",
  "Wellness",
  "Ambition",
  "Creativity",
  "Change",
]);

const CAROUSEL_SIZE = 20;
let slides: Slide[] = [];
let currentIndex = 0;
let loading = true;

async function fetchSlides() {
  try {
    const fetchedSlides: Slide[] = [];
    for (let i = 0; i < CAROUSEL_SIZE; i++) {
      const response = await fetch("https://dummyjson.com/quotes/random");
      const data = await response.json();
      const imageUrl = `https://picsum.photos/seed/${data.id}/1600/900`;

      const tags: string[] = [];
      const numberOfTags = Math.floor(Math.random() * 3) + 1;
      for (let j = 0; j < numberOfTags; j++) {
        let arr = Array.from(TAGS);
        tags.push(arr[Math.floor(Math.random() * TAGS.size)]);
      }

      const slide: Slide = {
        imageUrl,
        quote: {
          id: data.id,
          quote: data.quote,
          author: data.author,
          tags,
        },
      };

      fetchedSlides.push(slide);
    }

    slides = fetchedSlides;
    loading = false;
    document.getElementById("spinner")!.style.display = "none";
    document.getElementById("carousel")!.style.display = "flex";
    updateSlide();
  } catch (error) {
    console.error("Error fetching:", error);
  }
}

function updateSlide() {
  const currentSlide = slides[currentIndex];
  const slideImage = document.getElementById("slideImage") as HTMLImageElement;
  const quoteText = document.getElementById("quoteText")!;
  const quoteAuthor = document.getElementById("quoteAuthor")!;
  const tagsContainer = document.getElementById("tags")!;

  slideImage.src = currentSlide.imageUrl;
  quoteText.textContent = currentSlide.quote.quote;
  quoteAuthor.textContent = currentSlide.quote.author;

  tagsContainer.innerHTML = "";
  currentSlide.quote.tags.forEach((tag) => {
    const tagElement = document.createElement("span");
    tagElement.className = "tag";
    tagElement.textContent = tag;
    tagsContainer.appendChild(tagElement);
  });

  updateDots();
}

function updateDots() {
  const dotsContainer = document.getElementById("dots")!;
  dotsContainer.innerHTML = "";
  slides.forEach((_, index) => {
    const dot = document.createElement("span");
    dot.className = `dot ${index === currentIndex ? "active" : ""}`;
    dotsContainer.appendChild(dot);
  });
}

document.getElementById("previousBtn")!.addEventListener("click", () => {
  loading = true;
  currentIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
  loading = false;
  updateSlide();
});

document.getElementById("nextBtn")!.addEventListener("click", () => {
  loading = true;
  currentIndex = currentIndex === slides.length - 1 ? 0 : currentIndex + 1;
  loading = false;
  updateSlide();
});

window.onload = fetchSlides;

HTML SliderCSS SliderJS Slider