فراغیب

الگو:اسلایدر: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>
<div
<div class="fgwiki-gallery" id="fgwiki-gallery-1" dir="rtl" aria-label="گالری محصولات">
  class="fgwiki-gallery"
  id="fgwiki-gallery-1"
  dir="rtl"
  aria-label="گالری تصاویر"
>
   <div class="fgwiki-gallery__viewport">
   <div class="fgwiki-gallery__viewport">
     <div class="fgwiki-gallery__track">
     <div class="fgwiki-gallery__track">
خط ۱۱: خط ۶:
       <!-- تصویر ۱ -->
       <!-- تصویر ۱ -->
       <figure class="fgwiki-gallery__slide">
       <figure class="fgwiki-gallery__slide">
         <img
         <img src="https://dl.faraghaib.ir/m/106/3.jpg" alt="خرید اقساطی موبایل" loading="eager">
          src="https://dl.faraghaib.ir/m/106/3.jpg"
         <figcaption class="fgwiki-gallery__caption">خرید اقساطی موبایل | تحویل فوری و تضمینی</figcaption>
          alt="توضیح تصویر شماره ۱"
          loading="eager"
        >
         <figcaption class="fgwiki-gallery__caption">
          فروش نقد و اقساط موبایل
        </figcaption>
       </figure>
       </figure>


       <!-- تصویر ۲ -->
       <!-- تصویر ۲ -->
       <figure class="fgwiki-gallery__slide">
       <figure class="fgwiki-gallery__slide">
         <img
         <img src="https://dl.faraghaib.ir/m/106/5.jpg" alt="گوشی‌های پرچمدار" loading="lazy">
          src="https://dl.faraghaib.ir/m/106/5.jpg"
         <figcaption class="fgwiki-gallery__caption">جدیدترین گوشی‌های پرچمدار 2026 با گارانتی</figcaption>
          alt="توضیح تصویر شماره ۲"
          loading="lazy"
        >
         <figcaption class="fgwiki-gallery__caption">
          انواع گوشی های پرچم دار
        </figcaption>
       </figure>
       </figure>


       <!-- تصویر ۳ -->
       <!-- تصویر ۳ -->
       <figure class="fgwiki-gallery__slide">
       <figure class="fgwiki-gallery__slide">
         <img
         <img src="https://dl.faraghaib.ir/m/106/7.jpg" alt="هندزفری بلوتوثی" loading="lazy">
          src="https://dl.faraghaib.ir/m/106/7.jpg"
         <figcaption class="fgwiki-gallery__caption">هندزفری‌های بلوتوثی با بیس فوق‌العاده</figcaption>
          alt="توضیح تصویر شماره ۳"
          loading="lazy"
        >
         <figcaption class="fgwiki-gallery__caption">
          انواع هندز فری
        </figcaption>
       </figure>
       </figure>


       <!-- تصویر ۴ -->
       <!-- تصویر ۴ -->
       <figure class="fgwiki-gallery__slide">
       <figure class="fgwiki-gallery__slide">
         <img
         <img src="https://dl.faraghaib.ir/m/106/8.jpg" alt="شارژر اصلی" loading="lazy">
          src="https://dl.faraghaib.ir/m/106/8.jpg"
         <figcaption class="fgwiki-gallery__caption">شارژر اصلی و کابل فست شارژ (ضمانت تعویض)</figcaption>
          alt="توضیح تصویر شماره ۴"
          loading="lazy"
        >
         <figcaption class="fgwiki-gallery__caption">
          شارژر و کابل
        </figcaption>
       </figure>
       </figure>


       <!-- تصویر ۵ -->
       <!-- تصویر ۵ -->
       <figure class="fgwiki-gallery__slide">
       <figure class="fgwiki-gallery__slide">
         <img
         <img src="https://dl.faraghaib.ir/m/106/9.jpg" alt="هولدر موبایل" loading="lazy">
          src="https://dl.faraghaib.ir/m/106/9.jpg"
         <figcaption class="fgwiki-gallery__caption">هولدر موبایل ماشین با ثبات عالی و کیفیت بالا</figcaption>
          alt="توضیح تصویر شماره ۵"
          loading="lazy"
        >
         <figcaption class="fgwiki-gallery__caption">
          هولدری های باکیفیت
        </figcaption>
       </figure>
       </figure>


       <!-- تصویر ۶ -->
       <!-- تصویر ۶ -->
       <figure class="fgwiki-gallery__slide">
       <figure class="fgwiki-gallery__slide">
         <img
         <img src="https://dl.faraghaib.ir/m/106/images.jpg" alt="گلس سرامیکی" loading="lazy">
          src="https://dl.faraghaib.ir/m/106/images.jpg"
         <figcaption class="fgwiki-gallery__caption">گلس سرامیکی ضد ضربه (نصب رایگان در فروشگاه)</figcaption>
          alt="توضیح تصویر شماره ۶"
          loading="lazy"
        >
         <figcaption class="fgwiki-gallery__caption">
          گلس های با کیفیت
        </figcaption>
       </figure>
       </figure>


خط ۸۴: خط ۴۳:
   </div>
   </div>


  <!-- دکمه حرکت به راست -->
   <button class="fgwiki-gallery__button fgwiki-gallery__button--right" type="button" aria-label="بعدی">&#10095;</button>
   <button
   <button class="fgwiki-gallery__button fgwiki-gallery__button--left" type="button" aria-label="قبلی">&#10094;</button>
    class="fgwiki-gallery__button fgwiki-gallery__button--right"
   <div class="fgwiki-gallery__dots" aria-label="ناوبری"></div>
    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>
</div>


<style>
<style>
  /* ==============================
   .fgwiki-gallery { --fg-items: 3; --fg-gap: 16px; position: relative; width: 100%; margin: 24px auto; padding: 0 48px 36px; direction: rtl; }
    تنظیمات اصلی اسلایدر
   .fgwiki-gallery__viewport { width: 100%; overflow: hidden; border-radius: 14px; }
  ============================== */
   .fgwiki-gallery__track { display: flex; transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1); gap: var(--fg-gap); }
 
    
  .fgwiki-gallery,
   .fgwiki-gallery__slide { flex: 0 0 calc((100% - (var(--fg-items) - 1) * var(--fg-gap)) / var(--fg-items)); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
  .fgwiki-gallery * {
    
    box-sizing: border-box;
  /* فیکس کردن ابعاد تصاویر */
  }
   .fgwiki-gallery__slide img { display: block; width: 100%; height: 220px; object-fit: cover; aspect-ratio: 16/9; }
 
    
   .fgwiki-gallery {
   .fgwiki-gallery__caption { padding: 12px; font-size: 13px; font-weight: bold; text-align: center; color: #333; background: #f9f9f9; }
    --fg-items: 3;
   .fgwiki-gallery__button { position: absolute; top: 50%; width: 40px; height: 40px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 50%; border: none; cursor: pointer; }
    --fg-gap: 16px;
   .fgwiki-gallery__button--right { right: 0; }
    --fg-radius: 14px;
   .fgwiki-gallery__button--left { left: 0; }
    --fg-image-height: 220px;
    
    --fg-caption-bg: #ffffff;
   @media (max-width: 900px) { .fgwiki-gallery { --fg-items: 2; } }
    --fg-caption-color: #222222;
   @media (max-width: 600px) { .fgwiki-gallery { --fg-items: 1; padding: 0 30px; } }
    --fg-accent: #1473e6;
 
    position: relative;
    width: min(100%, 1200px);
    margin: 24px auto;
    padding: 0 48px 36px;
    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 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
 
  /* ==============================
    کارت هر تصویر
   ============================== */
 
   .fgwiki-gallery__slide {
    position: relative;
    flex: 0 0 calc(
      (100% - (var(--fg-items) - 1) * var(--fg-gap)) / var(--fg-items)
    );
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--fg-radius);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
   }
 
   .fgwiki-gallery__slide img {
    display: block;
    width: 100%;
    height: var(--fg-image-height);
    margin: 0;
    object-fit: cover;
    object-position: center;
    border: 0;
    transition: transform 400ms ease;
  }
 
   .fgwiki-gallery__slide:hover img {
    transform: scale(1.04);
  }
 
  /* ==============================
    کپشن تصاویر
  ============================== */
 
   .fgwiki-gallery__caption {
    position: relative;
    z-index: 2;
    min-height: 56px;
    padding: 14px 16px;
    overflow: hidden;
    color: var(--fg-caption-color);
    background: var(--fg-caption-bg);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
    text-align: right;
  }
 
  /* ==============================
    دکمه‌های جهت
  ============================== */
 
   .fgwiki-gallery__button {
    position: absolute;
    top: calc(50% - 18px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #ffffff;
    background: rgba(20, 20, 20, 0.76);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    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.35);
    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: 8px;
    height: 8px;
    padding: 0;
    background: #c8c8c8;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition:
      width 250ms ease,
      background-color 250ms ease;
  }
 
  .fgwiki-gallery__dot.is-active {
    width: 24px;
    background: var(--fg-accent);
    border-radius: 10px;
  }
 
  .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: 200px;
 
      padding-right: 42px;
      padding-left: 42px;
    }
 
    .fgwiki-gallery__button {
      width: 38px;
      height: 38px;
      font-size: 21px;
    }
  }
 
  /* ==============================
    نمایش یک تصویر در موبایل
  ============================== */
 
   @media (max-width: 600px) {
    .fgwiki-gallery {
      --fg-items: 1;
      --fg-gap: 12px;
      --fg-image-height: 210px;
 
      width: 100%;
      padding-right: 36px;
      padding-left: 36px;
    }
 
    .fgwiki-gallery__caption {
      min-height: 52px;
      padding: 12px 14px;
      font-size: 13px;
    }
 
    .fgwiki-gallery__button {
      width: 34px;
      height: 34px;
      font-size: 19px;
    }
  }
 
  /* غیرفعال‌شدن انیمیشن برای کاربران حساس به حرکت */
  @media (prefers-reduced-motion: reduce) {
    .fgwiki-gallery__track,
    .fgwiki-gallery__slide img,
    .fgwiki-gallery__button,
    .fgwiki-gallery__dot {
      transition: none;
    }
  }
</style>
</style>


<script>
<script>
   (function () {
   (function() {
     "use strict";
     const slider = document.querySelector("#fgwiki-gallery-1");
 
    const track = slider.querySelector(".fgwiki-gallery__track");
    document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
    const slides = Array.from(slider.querySelectorAll(".fgwiki-gallery__slide"));
      const track = slider.querySelector(".fgwiki-gallery__track");
    let currentIndex = 0;
      const slides = Array.from(
   
        slider.querySelectorAll(".fgwiki-gallery__slide")
    function getVisibleItems() { return parseInt(getComputedStyle(slider).getPropertyValue("--fg-items")); }
      );
   
      const rightButton = slider.querySelector(
    function moveSlider(index) {
        ".fgwiki-gallery__button--right"
      const maxIndex = slides.length - getVisibleItems();
      );
       // منطق چرخش بی‌نهایت
      const leftButton = slider.querySelector(
       if (index > maxIndex) currentIndex = 0;
        ".fgwiki-gallery__button--left"
       else if (index < 0) currentIndex = maxIndex;
      );
      else currentIndex = index;
      const dotsContainer = slider.querySelector(
        
        ".fgwiki-gallery__dots"
       const slideWidth = slides[0].offsetWidth + parseInt(getComputedStyle(track).gap);
      );
       track.style.transform = `translateX(${currentIndex * slideWidth}px)`;
 
    }
      if (!track || slides.length === 0) {
        return;
      }
 
      let currentIndex = 0;
      let autoPlayTimer = null;
      let touchStartX = 0;
      let touchEndX = 0;
 
      /* زمان حرکت خودکار برحسب میلی‌ثانیه */
      const autoPlayDelay = 3500;
 
      function getVisibleItems() {
        const value = getComputedStyle(slider)
          .getPropertyValue("--fg-items")
          .trim();
 
        return Math.max(1, parseInt(value, 10) || 1);
      }
 
      function getMaximumIndex() {
        return Math.max(0, slides.length - getVisibleItems());
       }
 
       function getSlideStep() {
        if (slides.length < 2) {
          return slides[0].getBoundingClientRect().width;
        }
 
        const firstSlide = slides[0].getBoundingClientRect();
        const secondSlide = slides[1].getBoundingClientRect();
 
        return Math.abs(secondSlide.left - firstSlide.left);
       }
 
      function normalizeIndex(index) {
        const maximumIndex = getMaximumIndex();
 
        if (index > maximumIndex) {
          return 0;
        }
 
        if (index < 0) {
          return maximumIndex;
        }
 
        return index;
       }
 
       function createDots() {
        const maximumIndex = getMaximumIndex();
 
        dotsContainer.innerHTML = "";
 
        for (let index = 0; index <= maximumIndex; 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 () {
            goToSlide(index);
            restartAutoPlay();
          });
 
          dotsContainer.appendChild(dot);
        }
       }
 
      function updateDots() {
        const dots = dotsContainer.querySelectorAll(
          ".fgwiki-gallery__dot"
        );
 
        dots.forEach(function (dot, index) {
          const isActive = index === currentIndex;
 
          dot.classList.toggle("is-active", isActive);
          dot.setAttribute(
            "aria-current",
            isActive ? "true" : "false"
          );
        });
      }
 
      function updateSlider(animate) {
        const maximumIndex = getMaximumIndex();
 
        if (currentIndex > maximumIndex) {
          currentIndex = maximumIndex;
        }
 
        if (!animate) {
          track.style.transition = "none";
        } else {
          track.style.transition = "";
        }
 
        const offset = currentIndex * getSlideStep();
 
        /*
        * مقدار مثبت باعث حرکت مجموعه تصاویر
        * به سمت راست در ساختار RTL می‌شود.
        */
        track.style.transform =
          "translate3d(" + offset + "px, 0, 0)";
 
        updateDots();
 
        if (!animate) {
          requestAnimationFrame(function () {
            requestAnimationFrame(function () {
              track.style.transition = "";
            });
          });
        }
      }
 
      function goToSlide(index) {
        currentIndex = normalizeIndex(index);
        updateSlider(true);
      }
 
      /* حرکت تصاویر به سمت راست */
      function moveRight() {
        goToSlide(currentIndex + 1);
      }
 
      /* حرکت تصاویر به سمت چپ */
      function moveLeft() {
        goToSlide(currentIndex - 1);
      }
 
      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 () {
        createDots();
        updateSlider(false);
      });
 
      if ("IntersectionObserver" in window) {
        const observer = new IntersectionObserver(
          function (entries) {
            entries.forEach(function (entry) {
              if (entry.isIntersecting) {
                startAutoPlay();
              } else {
                stopAutoPlay();
              }
            });
          },
          {
            threshold: 0.15
          }
        );
 
        observer.observe(slider);
      } else {
        startAutoPlay();
      }


      createDots();
    slider.querySelector(".fgwiki-gallery__button--right").onclick = () => moveSlider(currentIndex + 1);
      updateSlider(false);
    slider.querySelector(".fgwiki-gallery__button--left").onclick = () => moveSlider(currentIndex - 1);
     });
      
    // Auto-play
    setInterval(() => moveSlider(currentIndex + 1), 4000);
   })();
   })();
</script>
</script>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:اسلایدر»