Розв'язання проблеми з каруселлю для різних портфоліо

Розв’язання проблеми з каруселлю для різних портфоліо

7 Березня 2024 в 17:00 29

Каруселі – це популярний інструмент веб-дизайну для презентації зображень чи контенту в інтерактивному форматі. Вони стали невід’ємною частиною багатьох веб-сайтів, зокрема для показу різних портфоліо. Проте, іноді виникають проблеми з відображенням каруселі, особливо коли мова йде про різні портфоліо з різною кількістю зображень.

Одна з таких проблем, що може виникнути, – це ситуація, коли активний елемент каруселі залишається на останньому зображенні попереднього портфоліо, а поточне портфоліо має менше зображень. Це може призвести до відображення порожнього слайда або збою в роботі каруселі взагалі.

Давайте розглянемо сценарій, коли ми маємо різні портфоліо з різною кількістю зображень, і нам потрібно вирішити цю проблему, зберігаючи функціональність каруселі і забезпечуючи коректне відображення зображень для кожного портфоліо.

import React, { useState, useEffect } from "react";
import { PortfolioJSON } from "./list";
function Portfolio() {
  const [project, setProject] = useState("BBB 23 - Corrida");
  const [filteredProject, setFilteredProject] = useState([]);
  useEffect(() => {
    const filtered = () => {
      return PortfolioJSON.filter((item) => item.projetoName === project).map(
        (projeto) =>
          projeto.images.map((image, index) => (
            <div
              key={image.image}
              className={`carousel-item ${index === 0 ? "active" : ""}`}
            >
              <img
                src={image.image}
                className="d-block rounded-4 w-100"
                alt="..."
              />
              <div className="carousel-caption d-none d-md-block pb-0">
                <h5>{projeto.title}</h5>
                <p>{projeto.subtitle}</p>
              </div>
            </div>
          ))
      );
    };
    setFilteredProject(filtered);
  }, [project]);
  return (
    &lt;&gt;
      &lt;h1 id="scrollspyHeading2" className="text-center"&gt;
        Portifólio
      &lt;/h1&gt;
      &lt;div className="container d-flex flex-column flex-sm-row"&gt;
        &lt;ul className="nav nav-tabs-custom me-0 me-sm-3 mb-3 mb-sm-0"&gt;
          {PortfolioJSON.map((projeto) => (
            &lt;li className="nav-item text-no-wrap" key={projeto.projetoName}&gt;
              &lt;button
                className={`nav-link text-nowrap text-end w-100 ${
                  projeto.projetoName === project ? "active-project" : ""
                }`}
                aria-current="page"
                onClick={() => setProject(projeto.projetoName)}
              &gt;
                {projeto.projetoName}
              &lt;/button&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
        &lt;div id="carouselExampleIndicators2" className="carousel slide"&gt;
          &lt;div className="carousel-indicators mb-0"&gt;
            {PortfolioJSON.filter((item) => item.projetoName === project).map(
              (item) =>
                item.images.map((image, index) => (
                  &lt;button
                    type="button"
                    data-bs-target="#carouselExampleIndicators2"
                    data-bs-slide-to={index}
                    className={index === 0 ? "active" : ""}
                    aria-current="true"
                    aria-label={`Slide ${index++}`}
                  &gt;&lt;/button&gt;
                ))
            )}
          &lt;/div&gt;
          &lt;div className="carousel-inner"&gt;{filteredProject}&lt;/div&gt;
          &lt;button
            className="carousel-control-prev"
            type="button"
            data-bs-target="#carouselExampleIndicators2"
            data-bs-slide="prev"
          &gt;
            &lt;span
              className="carousel-control-prev-icon"
              aria-hidden="true"
            &gt;&lt;/span&gt;
            &lt;span className="visually-hidden"&gt;Previous&lt;/span&gt;
          &lt;/button&gt;
          &lt;button
            className="carousel-control-next"
            type="button"
            data-bs-target="#carouselExampleIndicators2"
            data-bs-slide="next"
          &gt;
            &lt;span
              className="carousel-control-next-icon"
              aria-hidden="true"
            &gt;&lt;/span&gt;
            &lt;span className="visually-hidden"&gt;Next&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/&gt;
  );
}
export default Portfolio;

import React, { useState, useEffect } from "react";

import { PortfolioJSON } from "./list";

function Portfolio() {

const [project, setProject] = useState("BBB 23 - Corrida");

const [filteredProject, setFilteredProject] = useState([]);

useEffect(() => {

const filtered = () => {

return PortfolioJSON.filter((item) => item.projetoName === project).map(

(projeto) =>

projeto.images.map((image, index) => (

<div

key={image.image}

className={`carousel-item ${index === 0 ? "active" : ""}`}

<img

src={image.image}

className="d-block rounded-4 w-100"

alt="..."

<h5>{projeto.title}</h5>

<p>{projeto.subtitle}</p>

</div>

))

);

};

setFilteredProject(filtered);

}, [project]);

return (

Portifólio

</h1>

{PortfolioJSON.map((projeto) => (

<button

className={`nav-link text-nowrap text-end w-100 ${

projeto.projetoName === project ? "active-project" : ""

}`}

aria-current="page"

onClick={() => setProject(projeto.projetoName)}

{projeto.projetoName}

</button>

</li>

))}

</ul>

{PortfolioJSON.filter((item) => item.projetoName === project).map(

(item) =>

item.images.map((image, index) => (

<button

type="button"

data-bs-target="#carouselExampleIndicators2"

data-bs-slide-to={index}

className={index === 0 ? "active" : ""}

aria-current="true"

aria-label={`Slide ${index++}`}

></button>

))

)}

</div>

<div className="carousel-inner">{filteredProject}</div>

<button

className="carousel-control-prev"

type="button"

data-bs-target="#carouselExampleIndicators2"

data-bs-slide="prev"

<span

className="carousel-control-prev-icon"

aria-hidden="true"

></span>

<span className="visually-hidden">Previous</span>

</button>

<button

className="carousel-control-next"

type="button"

data-bs-target="#carouselExampleIndicators2"

data-bs-slide="next"

<span

className="carousel-control-next-icon"

aria-hidden="true"

></span>

</button>

</div>

</>

);

}

export default Portfolio;

Щоб вирішити цю проблему, ми можемо скористатися вбудованим методом JavaScript, який дозволяє нам змінювати активний елемент каруселі при зміні проекту портфоліо. Для цього ми використовуємо ефект useEffect, який викликається при зміні значення проекту портфоліо. У цьому ефекті ми фільтруємо дані портфоліо, щоб отримати потрібні зображення для нового проекту, та оновлюємо стан filteredProject, який відповідає за відображення зображень у каруселі.

Загалом, зміна активного елемента каруселі при зміні проекту портфоліо вирішує проблему з відображенням порожніх слайдів або збоїв в роботі каруселі, забезпечуючи коректне відображення зображень для кожного портфоліо. Це дозволяє нам зберегти функціональність каруселі і поліпшити користувацький досвід на веб-сайті.