فراغیب

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

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


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


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


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


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


      <!-- تصویر ۶ -->
       <figure class="fgwiki-gallery__slide">
       <figure class="fgwiki-gallery__slide">
         <img src="https://dl.faraghaib.ir/m/106/images.jpg" alt="گلس سرامیکی" loading="lazy">
         <img
         <figcaption class="fgwiki-gallery__caption">گلس سرامیکی ضد ضربه (نصب رایگان در فروشگاه)</figcaption>
          src="https://dl.faraghaib.ir/m/106/images.jpg"
          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,
   .fgwiki-gallery__viewport { width: 100%; overflow: hidden; border-radius: 14px; }
  .fgwiki-gallery * {
   .fgwiki-gallery__track { display: flex; transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1); gap: var(--fg-gap); }
    box-sizing: border-box;
 
  }
   .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 {
  /* فیکس کردن ابعاد تصاویر */
    --fg-items: 3;
   .fgwiki-gallery__slide img { display: block; width: 100%; height: 220px; object-fit: cover; aspect-ratio: 16/9; }
    --fg-gap: 18px;
 
    --fg-radius: 18px;
   .fgwiki-gallery__caption { padding: 12px; font-size: 13px; font-weight: bold; text-align: center; color: #333; background: #f9f9f9; }
    --fg-image-height: 300px;
   .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-side-blur: 2px;
   .fgwiki-gallery__button--right { right: 0; }
    --fg-side-opacity: 0.55;
   .fgwiki-gallery__button--left { left: 0; }
    --fg-accent: #1473e6;
    
    --fg-card-bg: #ffffff;
   @media (max-width: 900px) { .fgwiki-gallery { --fg-items: 2; } }
    --fg-image-bg: #f5f7fa;
   @media (max-width: 600px) { .fgwiki-gallery { --fg-items: 1; padding: 0 30px; } }
    --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>
</style>


<script>
<script>
   (function() {
   (function () {
     const slider = document.querySelector("#fgwiki-gallery-1");
     "use strict";
    const track = slider.querySelector(".fgwiki-gallery__track");
 
    const slides = Array.from(slider.querySelectorAll(".fgwiki-gallery__slide"));
    document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
    let currentIndex = 0;
      const track = slider.querySelector(".fgwiki-gallery__track");
   
      const originalSlides = Array.from(
    function getVisibleItems() { return parseInt(getComputedStyle(slider).getPropertyValue("--fg-items")); }
        slider.querySelectorAll(".fgwiki-gallery__slide")
   
      );
    function moveSlider(index) {
      const rightButton = slider.querySelector(".fgwiki-gallery__button--right");
       const maxIndex = slides.length - getVisibleItems();
      const leftButton = slider.querySelector(".fgwiki-gallery__button--left");
       // منطق چرخش بی‌نهایت
      const dotsContainer = slider.querySelector(".fgwiki-gallery__dots");
       if (index > maxIndex) currentIndex = 0;
 
      else if (index < 0) currentIndex = maxIndex;
      if (!track || originalSlides.length === 0) {
       else currentIndex = index;
        return;
        
      }
       const slideWidth = slides[0].offsetWidth + parseInt(getComputedStyle(track).gap);
 
       track.style.transform = `translateX(${currentIndex * slideWidth}px)`;
      let currentIndex = 0;
    }
      let autoPlayTimer = null;
      let touchStartX = 0;
      let touchEndX = 0;
      let isAnimating = false;
      const autoPlayDelay = 3500;
 
      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();
      }


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