اسلایدر/پوشاک بابازاده - فراغیب

<html>
<div
  class="fgwiki-gallery"
  id="fgwiki-gallery-1"
  dir="rtl"
  aria-label="پوشاک مردانه بابازاده"
>
  <div class="fgwiki-gallery__viewport">
    <div class="fgwiki-gallery__track">

<!--  عکس و کپشن اول --->

      <figure class="fgwiki-gallery__slide">
        <a href="/wiki/خرید_شلوار_اسلش_مردانه_شیک_و_راحت_با_قیمت_مناسب">
        <img
          src="https://dl.faraghaib.ir/m/101/m101shalvareslash1.jpg"
          alt="شلوار اسلش یا جاگر مردانه شیک و راحت"
          loading="eager"
        >
        <figcaption class="fgwiki-gallery__caption">
          خرید شلوار اسلش مردانه شیک و راحت با قیمت مناسب
        </figcaption>
       </a>
      </figure>
     

<!--  عکس و کپشن دوم --->

      <figure class="fgwiki-gallery__slide">
       <a href="/wiki/جدیدترین_شلوار_اسلیم_فیت_مردانه_برای_استایل_جذاب_و_خاص">
        <img
          src="https://dl.faraghaib.ir/m/101/m101shalvareslimfit1.jpg"
          alt="شلوار جذب یا اسلیم فیت مردانه جدید"
          loading="lazy"
        >
        <figcaption class="fgwiki-gallery__caption">
          جدیدترین شلوار اسلیم فیت مردانه برای استایل جذاب و خاص
        </figcaption>
        </a>
      </figure>


<!--  عکس و کپشن سوم --->
     

      <figure class="fgwiki-gallery__slide">
<a href="/wiki/خرید_شلوار_دمپا_پاکتی_مردانه_ترند_برای_تیپ_امروزی">
        <img
          src="https://dl.faraghaib.ir/m/101/m101shalvarpakati1.jpg"
          alt="شلوار دمپا پاکتی مردانه خوش‌فرم"
          loading="lazy"
        >
        <figcaption class="fgwiki-gallery__caption">
          خرید شلوار دمپا پاکتی مردانه ترند برای تیپ امروزی
        </figcaption>
</a>
      </figure>

<!--  عکس و کپشن چهارم --->

      <figure class="fgwiki-gallery__slide">
       <a href="/wiki/شلوار_ساسون_دار_مردانه_جدید_برای_استایل_شیک_و_خوش%E2%80%8Cفرم">
        <img
          src="https://dl.faraghaib.ir/m/101/m101shalvarsason1.jpg"
          alt="شلوار ساسون دار مردانه با طراحی جدید"
          loading="lazy"
        >
        <figcaption class="fgwiki-gallery__caption">
          شلوار ساسون دار مردانه جدید برای استایل شیک و خوش‌فرم
        </figcaption>
        </a>
      </figure>

<!--  عکس و کپشن پنجم --->

      <figure class="fgwiki-gallery__slide">
       <a href="/wiki/خرید_شلوار_لی_مردانه_پرطرفدار_برای_استایل_روزمره">
        <img
          src="https://dl.faraghaib.ir/m/101/m101shalvarli1.jpg"
          alt="شلوار لی مردانه مناسب استایل روزانه"
          loading="lazy"
        >
        <figcaption class="fgwiki-gallery__caption">
          خرید شلوار لی مردانه پرطرفدار برای استایل روزمره
        </figcaption>
          </a>
      </figure>


<!--  عکس و کپشن ششم --->

      <figure class="fgwiki-gallery__slide">
          <a href="/wiki/بهترین_شلوار_ورزشی_مردانه_راحت_برای_تمرین_و_استفاده_روزانه">
        <img
          src="https://dl.faraghaib.ir/m/101/m101shalvarvarzeshi1.jpg"
          alt="شلوار ورزشی مردانه راحت و مناسب تمرین"
          loading="lazy"
        >
        <figcaption class="fgwiki-gallery__caption">
          بهترین شلوار ورزشی مردانه راحت برای تمرین و استفاده روزانه
        </figcaption>
      </a>
      </figure>


    </div>
  </div>

  <button
    class="fgwiki-gallery__button fgwiki-gallery__button--right"
    type="button"
    aria-label="نمایش اسلاید بعدی"
  >
    &#10095;
  </button>

  <button
    class="fgwiki-gallery__button fgwiki-gallery__button--left"
    type="button"
    aria-label="نمایش اسلاید قبلی"
  >
    &#10094;
  </button>

  <div class="fgwiki-gallery__dots" aria-label="ناوبری گالری"></div>
</div>

<style>
  .fgwiki-gallery,
  .fgwiki-gallery * {
    box-sizing: border-box;
  }

  .fgwiki-gallery {
    --fg-items: 3;
    --fg-gap: 18px;
    --fg-radius: 18px;
    --fg-image-height: 300px;
    --fg-side-blur: 2px;
    --fg-side-opacity: 0.55;
    --fg-accent: #1473e6;
    --fg-card-bg: #ffffff;
    --fg-image-bg: #f5f7fa;
    --fg-caption-bg: #ffffff;
    --fg-caption-color: #1f2937;

    position: relative;
    width: min(100%, 1240px);
    margin: 28px auto;
    padding: 0 56px 42px;
    direction: rtl;
    font-family: iransans, Arial, sans-serif;
  }

  .fgwiki-gallery__viewport {
    width: 100%;
    overflow: hidden;
    border-radius: var(--fg-radius);
    touch-action: pan-y;
  }

  .fgwiki-gallery__track {
    display: flex;
    flex-direction: row;
    gap: var(--fg-gap);
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .fgwiki-gallery__slide {
    flex: 0 0 calc(
      (100% - (var(--fg-items) - 1) * var(--fg-gap)) / var(--fg-items)
    );
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: var(--fg-card-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--fg-radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    transition:
      transform 450ms ease,
      filter 450ms ease,
      opacity 450ms ease,
      box-shadow 450ms ease;
  }

  .fgwiki-gallery__slide img {
    display: block;
    width: 100%;
    height: var(--fg-image-height);
    padding: 10px;
    background: var(--fg-image-bg);
    object-fit: contain;
    object-position: center;
    border: 0;
  }

  .fgwiki-gallery__caption {
    min-height: 72px;
    padding: 14px 16px 16px;
    color: var(--fg-caption-color);
    background: var(--fg-caption-bg);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
    text-align: right;
  }

  .fgwiki-gallery__slide:not(.is-center) {
    filter: blur(var(--fg-side-blur));
    opacity: var(--fg-side-opacity);
    transform: scale(0.94);
  }

  .fgwiki-gallery__slide.is-center {
    filter: none;
    opacity: 1;
    transform: scale(1.03);
    box-shadow: 0 16px 36px rgba(20, 115, 230, 0.18);
    border-color: rgba(20, 115, 230, 0.18);
  }

  .fgwiki-gallery__button {
    position: absolute;
    top: calc(50% - 24px);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #ffffff;
    background: rgba(17, 24, 39, 0.78);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
      background-color 200ms ease,
      transform 200ms ease;
  }

  .fgwiki-gallery__button:hover {
    background: var(--fg-accent);
    transform: translateY(-50%) scale(1.08);
  }

  .fgwiki-gallery__button:focus-visible {
    outline: 3px solid rgba(20, 115, 230, 0.30);
    outline-offset: 3px;
  }

  .fgwiki-gallery__button--right {
    right: 0;
  }

  .fgwiki-gallery__button--left {
    left: 0;
  }

  .fgwiki-gallery__dots {
    position: absolute;
    right: 50%;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transform: translateX(50%);
  }

  .fgwiki-gallery__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: #c7ced8;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition:
      width 250ms ease,
      background-color 250ms ease,
      opacity 250ms ease;
  }

  .fgwiki-gallery__dot.is-active {
    width: 24px;
    background: var(--fg-accent);
    border-radius: 999px;
  }

  .fgwiki-gallery__dot:focus-visible {
    outline: 2px solid var(--fg-accent);
    outline-offset: 2px;
  }

  @media (max-width: 900px) {
    .fgwiki-gallery {
      --fg-items: 2;
      --fg-image-height: 280px;
      --fg-side-blur: 1.5px;
      padding-right: 46px;
      padding-left: 46px;
    }

    .fgwiki-gallery__caption {
      min-height: 68px;
      font-size: 13px;
    }

    .fgwiki-gallery__button {
      width: 40px;
      height: 40px;
      font-size: 21px;
    }
  }

  @media (max-width: 600px) {
    .fgwiki-gallery {
      --fg-items: 1;
      --fg-gap: 12px;
      --fg-image-height: 260px;
      --fg-side-blur: 0;
      --fg-side-opacity: 1;
      width: 100%;
      padding-right: 36px;
      padding-left: 36px;
    }

    .fgwiki-gallery__slide,
    .fgwiki-gallery__slide.is-center,
    .fgwiki-gallery__slide:not(.is-center) {
      filter: none;
      opacity: 1;
      transform: none;
    }

    .fgwiki-gallery__caption {
      min-height: 62px;
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.8;
    }

    .fgwiki-gallery__button {
      width: 34px;
      height: 34px;
      font-size: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fgwiki-gallery__track,
    .fgwiki-gallery__slide,
    .fgwiki-gallery__button,
    .fgwiki-gallery__dot {
      transition: none;
    }
  }
</style>

<script>
  (function () {
    "use strict";

    document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
      const track = slider.querySelector(".fgwiki-gallery__track");
      const originalSlides = Array.from(
        slider.querySelectorAll(".fgwiki-gallery__slide")
      );
      const rightButton = slider.querySelector(".fgwiki-gallery__button--right");
      const leftButton = slider.querySelector(".fgwiki-gallery__button--left");
      const dotsContainer = slider.querySelector(".fgwiki-gallery__dots");

      if (!track || originalSlides.length === 0) {
        return;
      }

      let currentIndex = 0;
      let autoPlayTimer = null;
      let touchStartX = 0;
      let touchEndX = 0;
      let isAnimating = false;
      const autoPlayDelay = 2000;

      function getVisibleItems() {
        const value = getComputedStyle(slider)
          .getPropertyValue("--fg-items")
          .trim();

        return Math.max(1, parseInt(value, 10) || 1);
      }

      function cleanupClones() {
        Array.from(track.querySelectorAll(".is-clone")).forEach(function (node) {
          node.remove();
        });
      }

      function buildInfiniteTrack() {
        cleanupClones();

        const visibleItems = getVisibleItems();
        const slides = Array.from(track.children).filter(function (slide) {
          return !slide.classList.contains("is-clone");
        });

        const prependClones = slides.slice(-visibleItems).map(function (slide) {
          const clone = slide.cloneNode(true);
          clone.classList.add("is-clone");
          clone.setAttribute("aria-hidden", "true");
          return clone;
        });

        const appendClones = slides.slice(0, visibleItems).map(function (slide) {
          const clone = slide.cloneNode(true);
          clone.classList.add("is-clone");
          clone.setAttribute("aria-hidden", "true");
          return clone;
        });

        prependClones.forEach(function (clone) {
          track.insertBefore(clone, track.firstChild);
        });

        appendClones.forEach(function (clone) {
          track.appendChild(clone);
        });

        currentIndex = visibleItems;
        updateSlider(false);
      }

      function getAllSlides() {
        return Array.from(track.querySelectorAll(".fgwiki-gallery__slide"));
      }

      function getRealSlidesCount() {
        return originalSlides.length;
      }

      function getSlideStep() {
        const slides = getAllSlides();

        if (slides.length < 2) {
          return slides[0] ? slides[0].getBoundingClientRect().width : 0;
        }

        const firstSlide = slides[0].getBoundingClientRect();
        const secondSlide = slides[1].getBoundingClientRect();

        return Math.abs(secondSlide.left - firstSlide.left);
      }

      function updateDots() {
        const visibleItems = getVisibleItems();
        const realSlidesCount = getRealSlidesCount();
        const maxDotIndex = Math.max(0, realSlidesCount - visibleItems);
        const realIndex = ((currentIndex - visibleItems) % realSlidesCount + realSlidesCount) % realSlidesCount;
        const activeDotIndex = Math.min(realIndex, maxDotIndex);

        const dots = dotsContainer.querySelectorAll(".fgwiki-gallery__dot");

        dots.forEach(function (dot, index) {
          const isActive = index === activeDotIndex;
          dot.classList.toggle("is-active", isActive);
          dot.setAttribute("aria-current", isActive ? "true" : "false");
        });
      }

      function updateCenterState() {
        const visibleItems = getVisibleItems();
        const centerOffset = Math.floor(visibleItems / 2);
        const centerIndex = currentIndex + centerOffset;
        const slides = getAllSlides();

        slides.forEach(function (slide, index) {
          slide.classList.toggle("is-center", index === centerIndex);
        });
      }

      function updateSlider(animate) {
        const step = getSlideStep();
        const offset = currentIndex * step;

        if (!animate) {
          track.style.transition = "none";
        } else {
          track.style.transition = "";
        }

        track.style.transform = "translate3d(" + offset + "px, 0, 0)";

        updateDots();
        updateCenterState();

        if (!animate) {
          requestAnimationFrame(function () {
            requestAnimationFrame(function () {
              track.style.transition = "";
            });
          });
        }
      }

      function jumpIfNeeded() {
        const visibleItems = getVisibleItems();
        const realSlidesCount = getRealSlidesCount();

        if (currentIndex >= realSlidesCount + visibleItems) {
          currentIndex = visibleItems;
          updateSlider(false);
        } else if (currentIndex < visibleItems) {
          currentIndex = realSlidesCount + visibleItems - 1;
          updateSlider(false);
        }

        updateCenterState();
        updateDots();
      }

      function goToSlide(index) {
        if (isAnimating) {
          return;
        }

        isAnimating = true;
        currentIndex = index;
        updateSlider(true);

        window.setTimeout(function () {
          jumpIfNeeded();
          isAnimating = false;
        }, 680);
      }

      function moveRight() {
        goToSlide(currentIndex + 1);
      }

      function moveLeft() {
        goToSlide(currentIndex - 1);
      }

      function createDots() {
        const visibleItems = getVisibleItems();
        const dotsCount = Math.max(1, getRealSlidesCount() - visibleItems + 1);

        dotsContainer.innerHTML = "";

        for (let index = 0; index < dotsCount; index += 1) {
          const dot = document.createElement("button");

          dot.type = "button";
          dot.className = "fgwiki-gallery__dot";
          dot.setAttribute("aria-label", "نمایش اسلاید شماره " + (index + 1));

          dot.addEventListener("click", function () {
            currentIndex = getVisibleItems() + index;
            updateSlider(true);
            restartAutoPlay();
          });

          dotsContainer.appendChild(dot);
        }

        updateDots();
      }

      function startAutoPlay() {
        stopAutoPlay();

        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
          return;
        }

        autoPlayTimer = window.setInterval(function () {
          moveRight();
        }, autoPlayDelay);
      }

      function stopAutoPlay() {
        if (autoPlayTimer !== null) {
          window.clearInterval(autoPlayTimer);
          autoPlayTimer = null;
        }
      }

      function restartAutoPlay() {
        stopAutoPlay();
        startAutoPlay();
      }

      rightButton.addEventListener("click", function () {
        moveRight();
        restartAutoPlay();
      });

      leftButton.addEventListener("click", function () {
        moveLeft();
        restartAutoPlay();
      });

      slider.addEventListener("mouseenter", stopAutoPlay);
      slider.addEventListener("mouseleave", startAutoPlay);
      slider.addEventListener("focusin", stopAutoPlay);

      slider.addEventListener("focusout", function (event) {
        if (!slider.contains(event.relatedTarget)) {
          startAutoPlay();
        }
      });

      slider.addEventListener(
        "touchstart",
        function (event) {
          touchStartX = event.changedTouches[0].clientX;
          touchEndX = touchStartX;
          stopAutoPlay();
        },
        { passive: true }
      );

      slider.addEventListener(
        "touchmove",
        function (event) {
          touchEndX = event.changedTouches[0].clientX;
        },
        { passive: true }
      );

      slider.addEventListener(
        "touchend",
        function () {
          const swipeDistance = touchEndX - touchStartX;

          if (Math.abs(swipeDistance) > 45) {
            if (swipeDistance > 0) {
              moveRight();
            } else {
              moveLeft();
            }
          }

          startAutoPlay();
        },
        { passive: true }
      );

      window.addEventListener("resize", function () {
        buildInfiniteTrack();
        createDots();
      });

      if ("IntersectionObserver" in window) {
        const observer = new IntersectionObserver(
          function (entries) {
            entries.forEach(function (entry) {
              if (entry.isIntersecting) {
                startAutoPlay();
              } else {
                stopAutoPlay();
              }
            });
          },
          {
            threshold: 0.2
          }
        );

        observer.observe(slider);
      } else {
        startAutoPlay();
      }

      buildInfiniteTrack();
      createDots();
    });
  })();
</script>

</html>