فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
خط ۱: خط ۱:
<html>
<html>
<div
<style>
  class="fgwiki-gallery"
.fgwiki-gallery {
   id="fgwiki-gallery-1"
   --fg-items: 3;
   dir="rtl"
   --fg-gap: 18px;
   aria-label="دماوند پلیمر تولید کننده مخازن پلی اتیلن"
   --fg-radius: 18px;
>
  --fg-image-height: 300px;
   <div class="fgwiki-gallery__viewport">
   --fg-side-blur: 2px;
    <div class="fgwiki-gallery__track">
  --fg-side-opacity: 0.55;


<!--   اسلاید ۱ | مخازن پلی اتیلن   -->
  /* ===== Damavand Polymer Theme ===== */
      <figure class="fgwiki-gallery__slide">
  --fg-accent: #0B5FB3;
        <img
   --fg-accent-dark: #084C91;
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
  --fg-accent-light: #EAF4FC;
          alt="مخزن پلی اتیلن سه لایه دماوند پلیمر در ظرفیت‌های مختلف"
          loading="eager"
        >
        <figcaption class="fgwiki-gallery__caption">
          خرید مستقیم انواع مخزن پلی اتیلن در ظرفیت‌های متنوع با بهترین قیمت کارخانه، گارانتی معتبر، ارسال سریع و کیفیت تضمین‌شده برای مصارف خانگی، صنعتی و کشاورزی.
        </figcaption>
      </figure>


<!--   اسلاید ۲ | مخزن آب عمودی -->
  --fg-success: #2E9E44;
      <figure class="fgwiki-gallery__slide">
  --fg-success-dark: #237A35;
        <img
  --fg-success-light: #EDF8EF;
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
          alt="مخزن آب پلی اتیلن عمودی سه لایه مقاوم در برابر اشعه UV"
          loading="lazy"
        >
        <figcaption class="fgwiki-gallery__caption">
          انواع مخزن آب عمودی پلی اتیلن در ظرفیت‌های مختلف، مقاوم در برابر نور خورشید، بدون تغییر رنگ و مناسب نصب در حیاط، پشت‌بام و محیط‌های صنعتی.
        </figcaption>
      </figure>


<!-- اسلاید ۳ | مخزن افقی -->
  --fg-card-bg: #FFFFFF;
      <figure class="fgwiki-gallery__slide">
  --fg-image-bg: #F6FBFD;
        <img
  --fg-caption-bg: #FFFFFF;
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
  --fg-caption-color: #17406B;
          alt="مخزن افقی پلی اتیلن دماوند پلیمر مناسب ذخیره آب و مایعات"
          loading="lazy"
        >
        <figcaption class="fgwiki-gallery__caption">
          خرید مخزن افقی پلی اتیلن با طراحی استاندارد، مقاومت بالا در برابر ضربه و اشعه UV، مناسب ذخیره آب، مواد شیمیایی و انواع مایعات.
        </figcaption>
      </figure>


<!-- اسلاید ۴ | مخزن زیرپله -->
  position: relative;
      <figure class="fgwiki-gallery__slide">
  width: min(100%, 1240px);
        <img
  margin: 28px auto;
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
  padding: 0 56px 42px;
          alt="خزن زیرپله پلی اتیلن مناسب آپارتمان و فضای محدود"
  direction: rtl;
          loading="lazy"
  font-family: iransans, Arial, sans-serif;
        >
}
        <figcaption class="fgwiki-gallery__caption">
          انواع مخزن زیرپله پلی اتیلن برای آپارتمان‌ها و ساختمان‌های مسکونی؛ بهترین راهکار ذخیره آب در فضاهای محدود با کیفیت تضمین‌شده.
        </figcaption>
      </figure>


<!-- اسلاید ۵ | مخزن آسان‌رو -->
.fgwiki-gallery__slide {
      <figure class="fgwiki-gallery__slide">
  flex: 0 0 calc(
        <img
    (100% - (var(--fg-items) - 1) * var(--fg-gap)) / var(--fg-items)
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
  );
          alt="مخزن آسان‌رو پلی اتیلن دماوند پلیمر مناسب راهرو و درب باریک"
  min-width: 0;
          loading="lazy"
  margin: 0;
        >
  overflow: hidden;
        <figcaption class="fgwiki-gallery__caption">
  background: var(--fg-card-bg);
          خرید مخزن آسان‌رو پلی اتیلن با طراحی ویژه برای عبور آسان از راهروها و درب‌های کوچک، مناسب ساختمان‌های مسکونی و پروژه‌های بازسازی.
  border: 1px solid rgba(11, 95, 179, 0.10);
        </figcaption>
  border-radius: var(--fg-radius);
      </figure>
  box-shadow: 0 10px 28px rgba(11, 95, 179, 0.10);
  transition:
    transform 450ms ease,
    filter 450ms ease,
    opacity 450ms ease,
    box-shadow 450ms ease,
    border-color 450ms ease;
}


<!-- اسلاید ۶ | قیمت و خرید -->
.fgwiki-gallery__slide img {
      <figure class="fgwiki-gallery__slide">
  display: block;
        <img
  width: 100%;
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
  height: var(--fg-image-height);
          alt="خرید مخزن پلی اتیلن از کارخانه دماوند پلیمر با قیمت مناسب"
  padding: 10px;
          loading="lazy"
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FBFD 100%);
        >
  object-fit: contain;
        <figcaption class="fgwiki-gallery__caption">
  object-position: center;
          جدیدترین قیمت مخزن پلی اتیلن را مشاهده کنید و بدون واسطه از شرکت دماوند پلیمر خرید کنید. تضمین کیفیت، مشاوره تخصصی، ارسال سریع به سراسر ایران و بهترین قیمت تولیدکننده.
  border: 0;
        </figcaption>
}
      </figure>


    </div>
.fgwiki-gallery__caption {
   </div>
   min-height: 72px;
  padding: 14px 16px 16px;
  color: var(--fg-caption-color);
  background: var(--fg-caption-bg);
  border-top: 3px solid var(--fg-success);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  text-align: right;
}


   <button
.fgwiki-gallery__slide.is-center {
     class="fgwiki-gallery__button fgwiki-gallery__button--right"
   filter: none;
    type="button"
  opacity: 1;
    aria-label="نمایش اسلاید بعدی"
  transform: scale(1.03);
   >
  border-color: rgba(46, 158, 68, 0.35);
     &#10095;
  box-shadow:
  </button>
    0 18px 42px rgba(11, 95, 179, 0.18),
     0 0 0 2px rgba(46, 158, 68, 0.10);
}
.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: linear-gradient(135deg, #0B5FB3 0%, #2E9E44 100%);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(11, 95, 179, 0.25);
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
   transition:
    background 220ms ease,
    transform 220ms ease,
     box-shadow 220ms ease;
}


  <button
.fgwiki-gallery__button:hover {
    class="fgwiki-gallery__button fgwiki-gallery__button--left"
  background: linear-gradient(135deg, #084C91 0%, #237A35 100%);
    type="button"
  transform: translateY(-50%) scale(1.08);
    aria-label="نمایش اسلاید قبلی"
   box-shadow: 0 12px 28px rgba(11, 95, 179, 0.35);
   >
}
    &#10094;
  </button>


  <div class="fgwiki-gallery__dots" aria-label="ناوبری گالری"></div>
.fgwiki-gallery__button:focus-visible {
</div>
  outline: 3px solid rgba(11, 95, 179, 0.25);
  outline-offset: 3px;
}


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


  .fgwiki-gallery {
.fgwiki-gallery__button--left {
    --fg-items: 3;
  left: 0;
    --fg-gap: 18px;
}
    --fg-radius: 18px;
    --fg-image-height: 300px;
    --fg-side-blur: 2px;
    --fg-side-opacity: 0.55;
    --fg-accent: #ff2a2a;
    --fg-card-bg: #ffffff;
    --fg-image-bg: #f8f9fa;
    --fg-caption-bg: #ffffff;
    --fg-caption-color: #243447;


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


    position: relative;
.fgwiki-gallery__dot {
    width: min(100%, 1240px);
  width: 9px;
    margin: 28px auto;
  height: 9px;
    padding: 0 56px 42px;
  padding: 0;
    direction: rtl;
  background: #B8C8D6;
    font-family: iransans, Arial, sans-serif;
  border: 0;
  }
  border-radius: 50%;
  cursor: pointer;
  transition:
    width 250ms ease,
    background-color 250ms ease,
    opacity 250ms ease;
}


  .fgwiki-gallery__viewport {
.fgwiki-gallery__dot.is-active {
    width: 100%;
  width: 24px;
    overflow: hidden;
  background: linear-gradient(90deg, #0B5FB3 0%, #2E9E44 100%);
    border-radius: var(--fg-radius);
  border-radius: 999px;
    touch-action: pan-y;
}
  }


  .fgwiki-gallery__track {
.fgwiki-gallery__dot:focus-visible {
    display: flex;
  outline: 2px solid #0B5FB3;
    flex-direction: row;
  outline-offset: 2px;
     gap: var(--fg-gap);
}
     width: 100%;
@media (max-width: 900px) {
     transform: translate3d(0, 0, 0);
  .fgwiki-gallery {
     transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
     --fg-items: 2;
     will-change: transform;
     --fg-image-height: 280px;
     --fg-side-blur: 1.5px;
     padding-right: 46px;
     padding-left: 46px;
   }
   }


   .fgwiki-gallery__slide {
   .fgwiki-gallery__slide {
    flex: 0 0 calc(
     border-color: rgba(11, 95, 179, 0.10);
      (100% - (var(--fg-items) - 1) * var(--fg-gap)) / var(--fg-items)
     box-shadow: 0 8px 22px rgba(11, 95, 179, 0.10);
    );
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: var(--fg-card-bg);
    border: 1px solid #e5e7eb;
     border-radius: var(--fg-radius);
     box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition:
      transform 450ms ease,
      filter 450ms ease,
      opacity 450ms ease,
      box-shadow 450ms ease;
   }
   }


   .fgwiki-gallery__slide img {
   .fgwiki-gallery__slide.is-center {
     display: block;
     border-color: rgba(46, 158, 68, 0.35);
    width: 100%;
     box-shadow:
    height: var(--fg-image-height);
      0 14px 34px rgba(11, 95, 179, 0.18),
     padding: 10px;
      0 0 0 2px rgba(46, 158, 68, 0.10);
    background: var(--fg-image-bg);
    object-fit: contain;
    object-position: center;
    border: 0;
   }
   }


   .fgwiki-gallery__caption {
   .fgwiki-gallery__caption {
     min-height: 72px;
     min-height: 68px;
    padding: 14px 16px 16px;
     font-size: 13px;
    color: var(--fg-caption-color);
     color: #17406B;
    background: var(--fg-caption-bg);
     border-top: 3px solid #2E9E44;
     font-size: 14px;
     font-weight: 700;
    line-height: 1.9;
     text-align: right;
   }
   }


   .fgwiki-gallery__slide:not(.is-center) {
   .fgwiki-gallery__button {
     filter: blur(var(--fg-side-blur));
    width: 40px;
     opacity: var(--fg-side-opacity);
     height: 40px;
     transform: scale(0.94);
    font-size: 21px;
     background: linear-gradient(135deg, #0B5FB3 0%, #2E9E44 100%);
  }
 
  .fgwiki-gallery__button:hover {
     background: linear-gradient(135deg, #084C91 0%, #237A35 100%);
   }
   }


   .fgwiki-gallery__slide.is-center {
   .fgwiki-gallery__dot.is-active {
     filter: none;
     background: linear-gradient(90deg, #0B5FB3 0%, #2E9E44 100%);
    opacity: 1;
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(255,42,42,.18);
    border-color: rgba(255,42,42,.30);
   }
   }
}


   .fgwiki-gallery__button {
@media (max-width: 600px) {
     position: absolute;
   .fgwiki-gallery {
    top: calc(50% - 24px);
     --fg-items: 1;
    z-index: 15;
     --fg-gap: 12px;
    display: flex;
     --fg-image-height: 260px;
    align-items: center;
     --fg-side-blur: 0;
     justify-content: center;
     --fg-side-opacity: 1;
    width: 44px;
     width: 100%;
     height: 44px;
     padding-right: 36px;
     padding: 0;
     padding-left: 36px;
    color: #ffffff;
    background: rgba(36,52,71,.82);
    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 {
   .fgwiki-gallery__slide,
     background: var(--fg-accent);
  .fgwiki-gallery__slide.is-center,
     transform: translateY(-50%) scale(1.08);
  .fgwiki-gallery__slide:not(.is-center) {
     filter: none;
    opacity: 1;
     transform: none;
   }
   }


   .fgwiki-gallery__button:focus-visible {
   .fgwiki-gallery__slide {
     outline: 3px solid rgba(255,42,42,.30);
     border-color: rgba(11, 95, 179, 0.10);
     outline-offset: 3px;
     box-shadow: 0 8px 20px rgba(11, 95, 179, 0.10);
   }
   }


   .fgwiki-gallery__button--right {
   .fgwiki-gallery__caption {
     right: 0;
    min-height: 62px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.8;
    color: #17406B;
     border-top: 3px solid #2E9E44;
   }
   }


   .fgwiki-gallery__button--left {
   .fgwiki-gallery__button {
     left: 0;
    width: 34px;
    height: 34px;
    font-size: 18px;
     background: linear-gradient(135deg, #0B5FB3 0%, #2E9E44 100%);
   }
   }


   .fgwiki-gallery__dots {
   .fgwiki-gallery__dot.is-active {
     position: absolute;
     background: linear-gradient(90deg, #0B5FB3 0%, #2E9E44 100%);
    right: 50%;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transform: translateX(50%);
   }
   }
}


@media (prefers-reduced-motion: reduce) {
  .fgwiki-gallery__track,
  .fgwiki-gallery__slide,
  .fgwiki-gallery__button,
   .fgwiki-gallery__dot {
   .fgwiki-gallery__dot {
    width: 9px;
     transition: none;
    height: 9px;
    padding: 0;
    background: #d6dbe1;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
     transition:
      width 250ms ease,
      background-color 250ms ease,
      opacity 250ms ease;
   }
   }
}
</style>


  .fgwiki-gallery__dot.is-active {
<script>
    width: 24px;
(function () {
    background: var(--fg-accent);
  "use strict";
    border-radius: 999px;
  }


   .fgwiki-gallery__dot:focus-visible {
   document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
     outline: 2px solid var(--fg-accent);
    const track = slider.querySelector(".fgwiki-gallery__track");
     outline-offset: 2px;
    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");


  @media (max-width: 900px) {
    if (!track || originalSlides.length === 0) {
    .fgwiki-gallery {
       return;
      --fg-items: 2;
      --fg-image-height: 280px;
      --fg-side-blur: 1.5px;
      padding-right: 46px;
       padding-left: 46px;
     }
     }


     .fgwiki-gallery__caption {
     let currentIndex = 0;
       min-height: 68px;
    let autoPlayTimer = null;
       font-size: 13px;
    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);
     }
     }


     .fgwiki-gallery__button {
     function cleanupClones() {
      width: 40px;
      Array.from(track.querySelectorAll(".is-clone")).forEach(function (node) {
      height: 40px;
        node.remove();
       font-size: 21px;
       });
     }
     }
  }


  @media (max-width: 600px) {
    function buildInfiniteTrack() {
    .fgwiki-gallery {
      cleanupClones();
       --fg-items: 1;
 
       --fg-gap: 12px;
      const visibleItems = getVisibleItems();
       --fg-image-height: 260px;
      const slides = Array.from(track.children).filter(function (slide) {
       --fg-side-blur: 0;
        return !slide.classList.contains("is-clone");
       --fg-side-opacity: 1;
       });
       width: 100%;
 
       padding-right: 36px;
       const prependClones = slides.slice(-visibleItems).map(function (slide) {
       padding-left: 36px;
        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);
      });


    .fgwiki-gallery__slide,
       currentIndex = visibleItems;
    .fgwiki-gallery__slide.is-center,
       updateSlider(false);
    .fgwiki-gallery__slide:not(.is-center) {
       filter: none;
       opacity: 1;
      transform: none;
     }
     }


     .fgwiki-gallery__caption {
     function getAllSlides() {
       min-height: 62px;
       return Array.from(track.querySelectorAll(".fgwiki-gallery__slide"));
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.8;
     }
     }


     .fgwiki-gallery__button {
     function getRealSlidesCount() {
       width: 34px;
       return originalSlides.length;
      height: 34px;
      font-size: 18px;
     }
     }
  }


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


<script>
      if (slides.length < 2) {
  (function () {
        return slides[0] ? slides[0].getBoundingClientRect().width : 0;
    "use strict";
      }


    document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
       const firstSlide = slides[0].getBoundingClientRect();
      const track = slider.querySelector(".fgwiki-gallery__track");
       const secondSlide = slides[1].getBoundingClientRect();
      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 Math.abs(secondSlide.left - firstSlide.left);
        return;
    }
      }


       let currentIndex = 0;
    function updateDots() {
       let autoPlayTimer = null;
       const visibleItems = getVisibleItems();
       let touchStartX = 0;
       const realSlidesCount = getRealSlidesCount();
       let touchEndX = 0;
       const maxDotIndex = Math.max(0, realSlidesCount - visibleItems);
      let isAnimating = false;
       const realIndex =
       const autoPlayDelay = 3500;
        ((currentIndex - visibleItems) % realSlidesCount + realSlidesCount) %
        realSlidesCount;
       const activeDotIndex = Math.min(realIndex, maxDotIndex);


       function getVisibleItems() {
       const dots = dotsContainer.querySelectorAll(".fgwiki-gallery__dot");
        const value = getComputedStyle(slider)
          .getPropertyValue("--fg-items")
          .trim();


         return Math.max(1, parseInt(value, 10) || 1);
      dots.forEach(function (dot, index) {
      }
        const isActive = index === activeDotIndex;
         dot.classList.toggle("is-active", isActive);
        dot.setAttribute("aria-current", isActive ? "true" : "false");
      });
    }


      function cleanupClones() {
    function updateCenterState() {
        Array.from(track.querySelectorAll(".is-clone")).forEach(function (node) {
      const visibleItems = getVisibleItems();
          node.remove();
      const centerOffset = Math.floor(visibleItems / 2);
        });
      const centerIndex = currentIndex + centerOffset;
       }
       const slides = getAllSlides();


       function buildInfiniteTrack() {
       slides.forEach(function (slide, index) {
         cleanupClones();
         slide.classList.toggle("is-center", index === centerIndex);
      });
    }
})();
    function updateSlider(animate) {
      const step = getSlideStep();
      const offset = currentIndex * step;


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


        const prependClones = slides.slice(-visibleItems).map(function (slide) {
      track.style.transform =
          const clone = slide.cloneNode(true);
        "translate3d(" + offset + "px, 0, 0)";
          clone.classList.add("is-clone");
          clone.setAttribute("aria-hidden", "true");
          return clone;
        });


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


         prependClones.forEach(function (clone) {
      if (!animate) {
           track.insertBefore(clone, track.firstChild);
         requestAnimationFrame(function () {
           requestAnimationFrame(function () {
            track.style.transition = "";
          });
         });
         });
      }
    }


        appendClones.forEach(function (clone) {
    function jumpIfNeeded() {
          track.appendChild(clone);
      const visibleItems = getVisibleItems();
        });
      const realSlidesCount = getRealSlidesCount();


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


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


       function getRealSlidesCount() {
    function goToSlide(index) {
         return originalSlides.length;
       if (isAnimating) {
         return;
       }
       }


       function getSlideStep() {
       isAnimating = true;
        const slides = getAllSlides();
      currentIndex = index;
      updateSlider(true);


        if (slides.length < 2) {
      window.setTimeout(function () {
          return slides[0] ? slides[0].getBoundingClientRect().width : 0;
        jumpIfNeeded();
         }
         isAnimating = false;
      }, 680);
    }


        const firstSlide = slides[0].getBoundingClientRect();
    function moveRight() {
        const secondSlide = slides[1].getBoundingClientRect();
      goToSlide(currentIndex + 1);
    }


        return Math.abs(secondSlide.left - firstSlide.left);
    function moveLeft() {
      }
      goToSlide(currentIndex - 1);
    }


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


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


        dots.forEach(function (dot, index) {
      for (let index = 0; index < dotsCount; index += 1) {
          const isActive = index === activeDotIndex;
        const dot = document.createElement("button");
          dot.classList.toggle("is-active", isActive);
          dot.setAttribute("aria-current", isActive ? "true" : "false");
        });
      }


      function updateCenterState() {
        dot.type = "button";
         const visibleItems = getVisibleItems();
         dot.className = "fgwiki-gallery__dot";
         const centerOffset = Math.floor(visibleItems / 2);
         dot.setAttribute(
        const centerIndex = currentIndex + centerOffset;
          "aria-label",
         const slides = getAllSlides();
          "نمایش اسلاید شماره " + (index + 1)
         );


         slides.forEach(function (slide, index) {
         dot.addEventListener("click", function () {
           slide.classList.toggle("is-center", index === centerIndex);
           currentIndex = getVisibleItems() + index;
          updateSlider(true);
          restartAutoPlay();
         });
         });
        dotsContainer.appendChild(dot);
       }
       }


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


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


        track.style.transform = "translate3d(" + offset + "px, 0, 0)";
      if (
 
         window.matchMedia(
         updateDots();
          "(prefers-reduced-motion: reduce)"
        updateCenterState();
         ).matches
 
      ) {
         if (!animate) {
        return;
          requestAnimationFrame(function () {
            requestAnimationFrame(function () {
              track.style.transition = "";
            });
          });
        }
       }
       }


       function jumpIfNeeded() {
       autoPlayTimer = window.setInterval(function () {
         const visibleItems = getVisibleItems();
         moveRight();
        const realSlidesCount = getRealSlidesCount();
      }, autoPlayDelay);
 
    }
        if (currentIndex >= realSlidesCount + visibleItems) {
          currentIndex = visibleItems;
          updateSlider(false);
        } else if (currentIndex < visibleItems) {
          currentIndex = realSlidesCount + visibleItems - 1;
          updateSlider(false);
        }


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


       function goToSlide(index) {
    function restartAutoPlay() {
        if (isAnimating) {
       stopAutoPlay();
          return;
      startAutoPlay();
        }
    }
    rightButton.addEventListener("click", function () {
      moveRight();
      restartAutoPlay();
    });


        isAnimating = true;
    leftButton.addEventListener("click", function () {
        currentIndex = index;
      moveLeft();
        updateSlider(true);
      restartAutoPlay();
    });


        window.setTimeout(function () {
    slider.addEventListener("mouseenter", stopAutoPlay);
          jumpIfNeeded();
    slider.addEventListener("mouseleave", startAutoPlay);
          isAnimating = false;
    slider.addEventListener("focusin", stopAutoPlay);
        }, 680);
      }


       function moveRight() {
    slider.addEventListener("focusout", function (event) {
         goToSlide(currentIndex + 1);
       if (!slider.contains(event.relatedTarget)) {
         startAutoPlay();
       }
       }
    });


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


       function createDots() {
    slider.addEventListener(
         const visibleItems = getVisibleItems();
      "touchmove",
        const dotsCount = Math.max(1, getRealSlidesCount() - visibleItems + 1);
       function (event) {
         touchEndX = event.changedTouches[0].clientX;
      },
      { passive: true }
    );


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


         for (let index = 0; index < dotsCount; index += 1) {
         if (Math.abs(swipeDistance) > 45) {
          const dot = document.createElement("button");
           if (swipeDistance > 0) {
 
             moveRight();
          dot.type = "button";
          } else {
          dot.className = "fgwiki-gallery__dot";
             moveLeft();
          dot.setAttribute("aria-label", "نمایش اسلاید شماره " + (index + 1));
           }
 
           dot.addEventListener("click", function () {
             currentIndex = getVisibleItems() + index;
            updateSlider(true);
             restartAutoPlay();
           });
 
          dotsContainer.appendChild(dot);
         }
         }


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


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


        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    if ("IntersectionObserver" in window) {
           return;
      const observer = new IntersectionObserver(
        function (entries) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              startAutoPlay();
            } else {
              stopAutoPlay();
            }
           });
        },
        {
          threshold: 0.2
         }
         }
      );


        autoPlayTimer = window.setInterval(function () {
      observer.observe(slider);
          moveRight();
    } else {
        }, autoPlayDelay);
      startAutoPlay();
      }
    }


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


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


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


      leftButton.addEventListener("click", function () {
</script>
        moveLeft();
        restartAutoPlay();
      });


      slider.addEventListener("mouseenter", stopAutoPlay);
<div
      slider.addEventListener("mouseleave", startAutoPlay);
  class="fgwiki-gallery"
      slider.addEventListener("focusin", stopAutoPlay);
  id="fgwiki-gallery-1"
  dir="rtl"
  aria-label="دماوند پلیمر تولید کننده مخازن پلی اتیلن"
>
  <div class="fgwiki-gallery__viewport">
    <div class="fgwiki-gallery__track">


       slider.addEventListener("focusout", function (event) {
<!--    اسلاید ۱ | مخازن پلی اتیلن  -->
         if (!slider.contains(event.relatedTarget)) {
       <figure class="fgwiki-gallery__slide">
           startAutoPlay();
         <img
         }
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
       });
          alt="مخزن پلی اتیلن سه لایه دماوند پلیمر در ظرفیت‌های مختلف"
          loading="eager"
        >
        <figcaption class="fgwiki-gallery__caption">
           خرید مستقیم انواع مخزن پلی اتیلن در ظرفیت‌های متنوع با بهترین قیمت کارخانه، گارانتی معتبر، ارسال سریع و کیفیت تضمین‌شده برای مصارف خانگی، صنعتی و کشاورزی.
         </figcaption>
       </figure>


       slider.addEventListener(
<!--    اسلاید ۲ | مخزن آب عمودی -->
        "touchstart",
       <figure class="fgwiki-gallery__slide">
         function (event) {
         <img
           touchStartX = event.changedTouches[0].clientX;
           src="https://dl.faraghaib.ir/m/106/؟.jpg"
           touchEndX = touchStartX;
           alt="مخزن آب پلی اتیلن عمودی سه لایه مقاوم در برابر اشعه UV"
           stopAutoPlay();
           loading="lazy"
         },
         >
         { passive: true }
         <figcaption class="fgwiki-gallery__caption">
       );
          انواع مخزن آب عمودی پلی اتیلن در ظرفیت‌های مختلف، مقاوم در برابر نور خورشید، بدون تغییر رنگ و مناسب نصب در حیاط، پشت‌بام و محیط‌های صنعتی.
        </figcaption>
       </figure>


       slider.addEventListener(
<!-- اسلاید ۳ | مخزن افقی -->
        "touchmove",
       <figure class="fgwiki-gallery__slide">
         function (event) {
         <img
           touchEndX = event.changedTouches[0].clientX;
           src="https://dl.faraghaib.ir/m/106/؟.jpg"
         },
          alt="مخزن افقی پلی اتیلن دماوند پلیمر مناسب ذخیره آب و مایعات"
         { passive: true }
          loading="lazy"
       );
        >
         <figcaption class="fgwiki-gallery__caption">
          خرید مخزن افقی پلی اتیلن با طراحی استاندارد، مقاومت بالا در برابر ضربه و اشعه UV، مناسب ذخیره آب، مواد شیمیایی و انواع مایعات.
         </figcaption>
       </figure>


       slider.addEventListener(
<!-- اسلاید ۴ | مخزن زیرپله -->
        "touchend",
       <figure class="fgwiki-gallery__slide">
         function () {
        <img
          const swipeDistance = touchEndX - touchStartX;
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
          alt="خزن زیرپله پلی اتیلن مناسب آپارتمان و فضای محدود"
          loading="lazy"
         >
        <figcaption class="fgwiki-gallery__caption">
          انواع مخزن زیرپله پلی اتیلن برای آپارتمان‌ها و ساختمان‌های مسکونی؛ بهترین راهکار ذخیره آب در فضاهای محدود با کیفیت تضمین‌شده.
        </figcaption>
      </figure>


          if (Math.abs(swipeDistance) > 45) {
<!-- اسلاید ۵ | مخزن آسان‌رو -->
            if (swipeDistance > 0) {
      <figure class="fgwiki-gallery__slide">
              moveRight();
        <img
            } else {
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
              moveLeft();
          alt="مخزن آسان‌رو پلی اتیلن دماوند پلیمر مناسب راهرو و درب باریک"
            }
          loading="lazy"
           }
        >
        <figcaption class="fgwiki-gallery__caption">
           خرید مخزن آسان‌رو پلی اتیلن با طراحی ویژه برای عبور آسان از راهروها و درب‌های کوچک، مناسب ساختمان‌های مسکونی و پروژه‌های بازسازی.
        </figcaption>
      </figure>


           startAutoPlay();
<!-- اسلاید ۶ | قیمت و خرید -->
         },
      <figure class="fgwiki-gallery__slide">
         { passive: true }
        <img
       );
          src="https://dl.faraghaib.ir/m/106/؟.jpg"
           alt="خرید مخزن پلی اتیلن از کارخانه دماوند پلیمر با قیمت مناسب"
          loading="lazy"
         >
         <figcaption class="fgwiki-gallery__caption">
          جدیدترین قیمت مخزن پلی اتیلن را مشاهده کنید و بدون واسطه از شرکت دماوند پلیمر خرید کنید. تضمین کیفیت، مشاوره تخصصی، ارسال سریع به سراسر ایران و بهترین قیمت تولیدکننده.
        </figcaption>
       </figure>


      window.addEventListener("resize", function () {
    </div>
        buildInfiniteTrack();
  </div>
        createDots();
      });


      if ("IntersectionObserver" in window) {
  <button
        const observer = new IntersectionObserver(
    class="fgwiki-gallery__button fgwiki-gallery__button--right"
          function (entries) {
    type="button"
            entries.forEach(function (entry) {
    aria-label="نمایش اسلاید بعدی"
              if (entry.isIntersecting) {
  >
                startAutoPlay();
    &#10095;
              } else {
  </button>
                stopAutoPlay();
              }
            });
          },
          {
            threshold: 0.2
          }
        );


        observer.observe(slider);
  <button
      } else {
    class="fgwiki-gallery__button fgwiki-gallery__button--left"
        startAutoPlay();
    type="button"
      }
    aria-label="نمایش اسلاید قبلی"
  >
    &#10094;
  </button>


      buildInfiniteTrack();
   <div class="fgwiki-gallery__dots" aria-label="ناوبری گالری"></div>
      createDots();
</div>
    });
   })();
</script>




</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:اسلایدر/دماوندپلیمر»