پرش به محتوا

اسلایدر/دماوندپلیمر - فراغیب

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


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


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


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


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


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


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


.fgwiki-gallery__caption {
    </div>
   min-height: 72px;
   </div>
  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;
}


.fgwiki-gallery__slide.is-center {
   <button
   filter: none;
    class="fgwiki-gallery__button fgwiki-gallery__button--right"
  opacity: 1;
    type="button"
  transform: scale(1.03);
    aria-label="نمایش اسلاید بعدی"
  border-color: rgba(46, 158, 68, 0.35);
   >
  box-shadow:
    &#10095;
    0 18px 42px rgba(11, 95, 179, 0.18),
   </button>
    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;
}


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


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


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


.fgwiki-gallery__button--left {
  .fgwiki-gallery {
  left: 0;
    --fg-items: 3;
}
    --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%);
}


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


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


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


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


   .fgwiki-gallery__caption {
   .fgwiki-gallery__caption {
     min-height: 68px;
     min-height: 72px;
     font-size: 13px;
    padding: 14px 16px 16px;
     color: #17406B;
    color: var(--fg-caption-color);
     border-top: 3px solid #2E9E44;
    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 12px 28px rgba(255,42,42,.18);
     border-color: rgba(255,42,42,.30);
   }
   }


   .fgwiki-gallery__button {
   .fgwiki-gallery__button {
     width: 40px;
    position: absolute;
     height: 40px;
    top: calc(50% - 24px);
     font-size: 21px;
    z-index: 15;
     background: linear-gradient(135deg, #0B5FB3 0%, #2E9E44 100%);
    display: flex;
    align-items: center;
    justify-content: center;
     width: 44px;
     height: 44px;
    padding: 0;
     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__button:hover {
     background: linear-gradient(135deg, #084C91 0%, #237A35 100%);
     background: var(--fg-accent);
    transform: translateY(-50%) scale(1.08);
   }
   }


   .fgwiki-gallery__dot.is-active {
   .fgwiki-gallery__button:focus-visible {
     background: linear-gradient(90deg, #0B5FB3 0%, #2E9E44 100%);
     outline: 3px solid rgba(255,42,42,.30);
    outline-offset: 3px;
   }
   }
}


@media (max-width: 600px) {
   .fgwiki-gallery__button--right {
   .fgwiki-gallery {
     right: 0;
    --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__button--left {
  .fgwiki-gallery__slide.is-center,
     left: 0;
  .fgwiki-gallery__slide:not(.is-center) {
     filter: none;
    opacity: 1;
    transform: none;
   }
   }


   .fgwiki-gallery__slide {
   .fgwiki-gallery__dots {
     border-color: rgba(11, 95, 179, 0.10);
     position: absolute;
     box-shadow: 0 8px 20px rgba(11, 95, 179, 0.10);
    right: 50%;
    bottom: 6px;
    display: flex;
    align-items: center;
     justify-content: center;
    gap: 7px;
    transform: translateX(50%);
   }
   }


   .fgwiki-gallery__caption {
   .fgwiki-gallery__dot {
     min-height: 62px;
     width: 9px;
     padding: 12px 14px;
     height: 9px;
     font-size: 13px;
     padding: 0;
     line-height: 1.8;
     background: #d6dbe1;
     color: #17406B;
     border: 0;
     border-top: 3px solid #2E9E44;
     border-radius: 50%;
  }
     cursor: pointer;
 
     transition:
  .fgwiki-gallery__button {
      width 250ms ease,
     width: 34px;
      background-color 250ms ease,
     height: 34px;
      opacity 250ms ease;
    font-size: 18px;
    background: linear-gradient(135deg, #0B5FB3 0%, #2E9E44 100%);
   }
   }


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


@media (prefers-reduced-motion: reduce) {
   .fgwiki-gallery__dot:focus-visible {
   .fgwiki-gallery__track,
    outline: 2px solid var(--fg-accent);
  .fgwiki-gallery__slide,
     outline-offset: 2px;
  .fgwiki-gallery__button,
  .fgwiki-gallery__dot {
     transition: none;
   }
   }
}
</style>


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


  document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
    .fgwiki-gallery__caption {
    const track = slider.querySelector(".fgwiki-gallery__track");
      min-height: 68px;
    const originalSlides = Array.from(
       font-size: 13px;
       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) {
     .fgwiki-gallery__button {
       return;
       width: 40px;
      height: 40px;
      font-size: 21px;
     }
     }
  }


     let currentIndex = 0;
  @media (max-width: 600px) {
    let autoPlayTimer = null;
     .fgwiki-gallery {
    let touchStartX = 0;
      --fg-items: 1;
    let touchEndX = 0;
      --fg-gap: 12px;
    let isAnimating = false;
      --fg-image-height: 260px;
    const autoPlayDelay = 3500;
      --fg-side-blur: 0;
 
      --fg-side-opacity: 1;
    function getVisibleItems() {
      width: 100%;
       const value = getComputedStyle(slider)
      padding-right: 36px;
        .getPropertyValue("--fg-items")
       padding-left: 36px;
        .trim();
    }


      return Math.max(1, parseInt(value, 10) || 1);
    .fgwiki-gallery__slide,
    .fgwiki-gallery__slide.is-center,
    .fgwiki-gallery__slide:not(.is-center) {
      filter: none;
      opacity: 1;
      transform: none;
     }
     }


     function cleanupClones() {
     .fgwiki-gallery__caption {
       Array.from(track.querySelectorAll(".is-clone")).forEach(function (node) {
       min-height: 62px;
        node.remove();
      padding: 12px 14px;
       });
      font-size: 13px;
       line-height: 1.8;
     }
     }


     function buildInfiniteTrack() {
     .fgwiki-gallery__button {
      cleanupClones();
       width: 34px;
 
       height: 34px;
      const visibleItems = getVisibleItems();
       font-size: 18px;
      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() {
  @media (prefers-reduced-motion: reduce) {
      return Array.from(track.querySelectorAll(".fgwiki-gallery__slide"));
    .fgwiki-gallery__track,
    .fgwiki-gallery__slide,
    .fgwiki-gallery__button,
    .fgwiki-gallery__dot {
      transition: none;
     }
     }
  }
</style>


    function getRealSlidesCount() {
<script>
      return originalSlides.length;
  (function () {
    }
    "use strict";


     function getSlideStep() {
     document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
       const slides = getAllSlides();
       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 (slides.length < 2) {
       if (!track || originalSlides.length === 0) {
         return slides[0] ? slides[0].getBoundingClientRect().width : 0;
         return;
       }
       }


       const firstSlide = slides[0].getBoundingClientRect();
       let currentIndex = 0;
       const secondSlide = slides[1].getBoundingClientRect();
      let autoPlayTimer = null;
      let touchStartX = 0;
      let touchEndX = 0;
      let isAnimating = false;
       const autoPlayDelay = 3500;


       return Math.abs(secondSlide.left - firstSlide.left);
       function getVisibleItems() {
    }
        const value = getComputedStyle(slider)
          .getPropertyValue("--fg-items")
          .trim();


    function updateDots() {
        return Math.max(1, parseInt(value, 10) || 1);
      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");
       function cleanupClones() {
        Array.from(track.querySelectorAll(".is-clone")).forEach(function (node) {
          node.remove();
        });
      }


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


    function updateCenterState() {
        const visibleItems = getVisibleItems();
      const visibleItems = getVisibleItems();
        const slides = Array.from(track.children).filter(function (slide) {
      const centerOffset = Math.floor(visibleItems / 2);
          return !slide.classList.contains("is-clone");
      const centerIndex = currentIndex + centerOffset;
        });
      const slides = getAllSlides();


      slides.forEach(function (slide, index) {
        const prependClones = slides.slice(-visibleItems).map(function (slide) {
        slide.classList.toggle("is-center", index === centerIndex);
          const clone = slide.cloneNode(true);
      });
          clone.classList.add("is-clone");
    }
          clone.setAttribute("aria-hidden", "true");
})();
          return clone;
    function updateSlider(animate) {
        });
      const step = getSlideStep();
      const offset = currentIndex * step;


      if (!animate) {
        const appendClones = slides.slice(0, visibleItems).map(function (slide) {
        track.style.transition = "none";
          const clone = slide.cloneNode(true);
      } else {
          clone.classList.add("is-clone");
        track.style.transition = "";
          clone.setAttribute("aria-hidden", "true");
      }
          return clone;
        });


      track.style.transform =
        prependClones.forEach(function (clone) {
         "translate3d(" + offset + "px, 0, 0)";
          track.insertBefore(clone, track.firstChild);
         });


      updateDots();
         appendClones.forEach(function (clone) {
      updateCenterState();
           track.appendChild(clone);
 
      if (!animate) {
         requestAnimationFrame(function () {
           requestAnimationFrame(function () {
            track.style.transition = "";
          });
         });
         });
      }
    }


    function jumpIfNeeded() {
      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);
       }
       }


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


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


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


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


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


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


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


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


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


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


         dot.addEventListener("click", function () {
         slides.forEach(function (slide, index) {
           currentIndex = getVisibleItems() + index;
           slide.classList.toggle("is-center", index === centerIndex);
          updateSlider(true);
          restartAutoPlay();
         });
         });
      }
      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();


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


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


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


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


       autoPlayTimer = window.setInterval(function () {
       function goToSlide(index) {
         moveRight();
         if (isAnimating) {
      }, autoPlayDelay);
          return;
    }
        }
 
        isAnimating = true;
        currentIndex = index;
        updateSlider(true);


    function stopAutoPlay() {
        window.setTimeout(function () {
      if (autoPlayTimer !== null) {
          jumpIfNeeded();
        window.clearInterval(autoPlayTimer);
          isAnimating = false;
         autoPlayTimer = null;
         }, 680);
       }
       }
    }


    function restartAutoPlay() {
       function moveRight() {
       stopAutoPlay();
        goToSlide(currentIndex + 1);
      startAutoPlay();
       }
    }
    rightButton.addEventListener("click", function () {
      moveRight();
       restartAutoPlay();
    });


    leftButton.addEventListener("click", function () {
      function moveLeft() {
      moveLeft();
        goToSlide(currentIndex - 1);
       restartAutoPlay();
       }
    });


    slider.addEventListener("mouseenter", stopAutoPlay);
      function createDots() {
    slider.addEventListener("mouseleave", startAutoPlay);
        const visibleItems = getVisibleItems();
    slider.addEventListener("focusin", stopAutoPlay);
        const dotsCount = Math.max(1, getRealSlidesCount() - visibleItems + 1);


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


    slider.addEventListener(
        for (let index = 0; index < dotsCount; index += 1) {
      "touchstart",
          const dot = document.createElement("button");
      function (event) {
        touchStartX = event.changedTouches[0].clientX;
        touchEndX = touchStartX;
        stopAutoPlay();
      },
      { passive: true }
    );


    slider.addEventListener(
          dot.type = "button";
      "touchmove",
          dot.className = "fgwiki-gallery__dot";
      function (event) {
          dot.setAttribute("aria-label", "نمایش اسلاید شماره " + (index + 1));
        touchEndX = event.changedTouches[0].clientX;
      },
      { passive: true }
    );


    slider.addEventListener(
          dot.addEventListener("click", function () {
      "touchend",
            currentIndex = getVisibleItems() + index;
      function () {
            updateSlider(true);
        const swipeDistance = touchEndX - touchStartX;
            restartAutoPlay();
          });


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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




</html>
</html>

نسخهٔ ‏۲۷ ژوئیهٔ ۲۰۲۶، ساعت ۱۲:۴۵

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:اسلایدر/دماوندپلیمر&oldid=4502»