https://puertoboyaca-boyaca.gov.co/SiteAssets/PuertoBoyaca/componentes/HomeGaleriaImagenes/assets/js/main.js

1import { getData } from "./data-function.js";
2
3document.addEventListener("DOMContentLoaded", async () => {
4  const appContainer = document.querySelector("#app");
5
6  try {
7    const data = await getData();
8    const limitedData = data.slice(0, 4); // 👈 Limite de 4 imágenes
9
10    const gallerySection = createGallerySection();
11    const sliderContainer = createSliderContainer(limitedData);
12    const galleryContainer = createGalleryContainer(limitedData);
13
14    gallerySection.appendChild(sliderContainer);
15    gallerySection.appendChild(galleryContainer);
16    appContainer.appendChild(gallerySection);
17
18    initializeSlider(sliderContainer, galleryContainer);
19    console.log("Datos pintados correctamente en el HTML.");
20  } catch (error) {
21    console.error("Error al obtener o pintar los datos:", error);
22  }
23});
24
25function createGallerySection() {
26  const gallerySection = document.createElement("section");
27  gallerySection.classList.add("unique-image-gallery");
28
29  const galleryTitle = document.createElement("h2");
30  galleryTitle.classList.add("gallery-title");
31  galleryTitle.textContent = "Galería de Imágenes";
32
33  gallerySection.appendChild(galleryTitle);
34  return gallerySection;
35}
36
37function createSliderContainer(data) {
38  const sliderContainer = document.createElement("div");
39  sliderContainer.classList.add("slider-container");
40
41  const slider = document.createElement("div");
42  slider.classList.add("slider");
43
44  data.forEach((item) => {
45    const sliderItem = document.createElement("div");
46    sliderItem.classList.add("slider-item");
47
48    const img = document.createElement("img");
49    img.src = item.FileLeafRef;
50    img.alt = item.Title;
51
52    sliderItem.appendChild(img);
53    slider.appendChild(sliderItem);
54  });
55
56  const prevButton = createSliderButton(
57    "prev-btn",
58    "/SiteAssets/PuertoBoyaca/componentes/HomeGaleriaImagenes/assets/img/left-cicle-arrow.svg",
59    "arrowleft"
60  );
61  const nextButton = createSliderButton(
62    "next-btn",
63    "/SiteAssets/PuertoBoyaca/componentes/HomeGaleriaImagenes/assets/img/rigth-cicle-arrow.svg",
64    "arrowRight"
65  );
66
67  sliderContainer.appendChild(slider);
68  sliderContainer.appendChild(prevButton);
69  sliderContainer.appendChild(nextButton);
70
71  return sliderContainer;
72}
73
74function createSliderButton(className, imgSrc, imgAlt) {
75  const button = document.createElement("button");
76  button.type = "button";
77  button.classList.add("slider-btn", className);
78
79  const img = document.createElement("img");
80  img.src = imgSrc;
81  img.alt = imgAlt;
82
83  button.appendChild(img);
84  return button;
85}
86
87function createGalleryContainer(data) {
88  const galleryContainer = document.createElement("div");
89  galleryContainer.classList.add("gallery-container");
90
91  data.forEach((item) => {
92    const galleryItem = document.createElement("div");
93    galleryItem.classList.add("gallery-item");
94
95    const img = document.createElement("img");
96    img.src = item.FileLeafRef;
97    img.alt = item.Title;
98
99    galleryItem.appendChild(img);
100    galleryContainer.appendChild(galleryItem);
101  });
102
103  return galleryContainer;
104}
105
106function initializeSlider(sliderContainer, galleryContainer) {
107  const slider = sliderContainer.querySelector(".slider");
108  const galleryItems = galleryContainer.querySelectorAll(".gallery-item img");
109  const sliderItems = slider.querySelectorAll(".slider-item");
110  const prevButton = sliderContainer.querySelector(".prev-btn");
111  const nextButton = sliderContainer.querySelector(".next-btn");
112
113  let currentIndex = 0;
114
115  function updateSlider() {
116    const offset = -currentIndex * 100;
117    slider.style.transform = `translateX(${offset}%)`;
118  }
119
120  prevButton.addEventListener("click", () => {
121    currentIndex = currentIndex > 0 ? currentIndex - 1 : sliderItems.length - 1;
122    updateSlider();
123  });
124
125  nextButton.addEventListener("click", () => {
126    currentIndex = currentIndex < sliderItems.length - 1 ? currentIndex + 1 : 0;
127    updateSlider();
128  });
129
130  setInterval(() => {
131    currentIndex = currentIndex < sliderItems.length - 1 ? currentIndex + 1 : 0;
132    updateSlider();
133  }, 5000);
134

135  galleryItems.forEach((img, index) => {
136    img.addEventListener("click", () => {
137      currentIndex = index;
138      updateSlider();
139    });
140  });
141}