پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<br>
<html>
<html>
<div
<div
خط ۱۱۷: خط ۱۱۸:


<style>
<style>
  .fgwiki-gallery,
.fgwiki-gallery,
  .fgwiki-gallery * {
.fgwiki-gallery *{
     box-sizing: border-box;
     box-sizing:border-box;
  }
}
 
.fgwiki-gallery{
  .fgwiki-gallery {
    /* Mobile First */
     --fg-items: 3;
     --fg-items:1;
     --fg-gap: 18px;
     --fg-gap:12px;
     --fg-radius: 18px;
     --fg-radius:18px;
     --fg-image-height: 300px;
     --fg-image-height:260px;
     --fg-side-blur: 2px;
     --fg-side-blur:0;
     --fg-side-opacity: 0.55;
     --fg-side-opacity:1;
     --fg-accent: #ff2a2a;
     --fg-accent:#ff2a2a;
     --fg-card-bg: #ffffff;
     --fg-card-bg:#fff;
     --fg-image-bg: #f8f9fa;
     --fg-image-bg:#f8f9fa;
     --fg-caption-bg: #ffffff;
     --fg-caption-bg:#fff;
     --fg-caption-color: #243447;
     --fg-caption-color:#243447;
 
     position:relative;
 
     width:100%;
     position: relative;
    max-width:1240px;
     width: min(100%, 1240px);
     margin:28px auto;
     margin: 28px auto;
     padding:0 36px 42px;
     padding: 0 56px 42px;
     direction:rtl;
     direction: rtl;
     font-family:iransans,Arial,sans-serif;
     font-family: iransans, Arial, sans-serif;
    overflow:hidden;
  }
}
 
.fgwiki-gallery__viewport{
  .fgwiki-gallery__viewport {
     width:100%;
     width: 100%;
     overflow:hidden;
     overflow: hidden;
     border-radius:var(--fg-radius);
     border-radius: var(--fg-radius);
     touch-action:pan-y;
     touch-action: pan-y;
}
  }
.fgwiki-gallery__track{
 
     display:flex;
  .fgwiki-gallery__track {
     gap:var(--fg-gap);
     display: flex;
     width:100%;
    flex-direction: row;
    will-change:transform;
     gap: var(--fg-gap);
     transform:translate3d(0,0,0);
     width: 100%;
     transition:transform .65s cubic-bezier(.22,1,.36,1);
     transform: translate3d(0, 0, 0);
}
     transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
.fgwiki-gallery__slide{
    will-change: transform;
     flex:0 0 calc(
  }
        (100% - (var(--fg-items) - 1) * var(--fg-gap))
 
        /
  .fgwiki-gallery__slide {
        var(--fg-items)
     flex: 0 0 calc(
      (100% - (var(--fg-items) - 1) * var(--fg-gap)) / var(--fg-items)
     );
     );
     min-width: 0;
     min-width:0;
     margin: 0;
     margin:0;
     overflow: hidden;
     overflow:hidden;
     background: var(--fg-card-bg);
     background:var(--fg-card-bg);
    border: 1px solid #e5e7eb;
     border-radius:var(--fg-radius);
     border-radius: var(--fg-radius);
     border:1px solid #e5e7eb;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
     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 {
    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 12px 28px rgba(255,42,42,.18);
    border-color: rgba(255,42,42,.30);
  }
 
  .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(36,52,71,.82);
    border: 0;
    border-radius: 50%;
    box-shadow:  2px 5px 4px #000000;;
    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(255,42,42,.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: #d6dbe1;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
     transition:
     transition:
      width 250ms ease,
        transform .4s ease,
      background-color 250ms ease,
        opacity .4s ease,
      opacity 250ms ease;
        filter .4s ease,
  }
        box-shadow .4s ease;
 
}
  .fgwiki-gallery__dot.is-active {
.fgwiki-gallery__slide img{
     width: 24px;
    display:block;
     background: var(--fg-accent);
    width:100%;
     border-radius: 999px;
    height:var(--fg-image-height);
  }
    padding:10px;
 
    object-fit:contain;
  .fgwiki-gallery__dot:focus-visible {
    object-position:center;
     outline: 2px solid var(--fg-accent);
    background:var(--fg-image-bg);
     outline-offset: 2px;
    border:0;
  }
}
 
.fgwiki-gallery__caption{
  @media (max-width: 900px) {
    min-height:62px;
    .fgwiki-gallery {
    padding:12px 14px;
      --fg-items: 2;
    background:var(--fg-caption-bg);
      --fg-image-height: 280px;
    color:var(--fg-caption-color);
      --fg-side-blur: 1.5px;
    font-size:13px;
      padding-right: 46px;
    font-weight:700;
      padding-left: 46px;
    line-height:1.8;
     }
    text-align:right;
 
}
     .fgwiki-gallery__caption {
/* موبایل هیچ Blur ندارد */
      min-height: 68px;
.fgwiki-gallery__slide,
      font-size: 13px;
.fgwiki-gallery__slide.is-center,
    }
.fgwiki-gallery__slide:not(.is-center){
 
    opacity:1;
     .fgwiki-gallery__button {
    filter:none;
      width: 40px;
    transform:none;
      height: 40px;
}
      font-size: 21px;
/* دکمه ها */
    }
.fgwiki-gallery__button{
  }
    position:absolute;
 
    top:50%;
  @media (max-width: 600px) {
    z-index:15;
    .fgwiki-gallery {
     width:34px;
      --fg-items: 1;
    height:34px;
      --fg-gap: 12px;
    display:flex;
      --fg-image-height: 260px;
    align-items:center;
      --fg-side-blur: 0;
    justify-content:center;
      --fg-side-opacity: 1;
    padding:0;
      width: 100%;
    border:0;
      padding-right: 36px;
    border-radius:50%;
      padding-left: 36px;
    background:rgba(36,52,71,.82);
    }
    color:#fff;
 
    font-size:18px;
    .fgwiki-gallery__slide,
    cursor:pointer;
    .fgwiki-gallery__slide.is-center,
    box-shadow:2px 5px 4px rgba(0,0,0,.35);
    .fgwiki-gallery__slide:not(.is-center) {
    transform:translateY(-50%);
      filter: none;
    transition:.25s;
      opacity: 1;
}
      transform: none;
.fgwiki-gallery__button:hover{
    }
     background:var(--fg-accent);
 
    transform:translateY(-50%) scale(1.08);
    .fgwiki-gallery__caption {
}
      min-height: 62px;
.fgwiki-gallery__button:focus-visible{
      padding: 12px 14px;
    outline:3px solid rgba(255,42,42,.25);
      font-size: 13px;
    outline-offset:3px;
      line-height: 1.8;
}
    }
.fgwiki-gallery__button--right{
 
    right:0;
    .fgwiki-gallery__button {
}
      width: 34px;
.fgwiki-gallery__button--left{
      height: 34px;
    left:0;
      font-size: 18px;
}
    }
/* Dots */
  }
.fgwiki-gallery__dots{
 
    position:absolute;
  @media (prefers-reduced-motion: reduce) {
    bottom:6px;
    .fgwiki-gallery__track,
    left:50%;
    .fgwiki-gallery__slide,
    display:flex;
    .fgwiki-gallery__button,
    gap:7px;
    .fgwiki-gallery__dot {
    transform:translateX(-50%);
      transition: none;
}
    }
.fgwiki-gallery__dot{
  }
    width:9px;
    height:9px;
    padding:0;
    border:0;
     border-radius:999px;
    background:#d6dbe1;
    cursor:pointer;
    transition:.25s;
}
.fgwiki-gallery__dot.is-active{
    width:24px;
    background:var(--fg-accent);
}
.fgwiki-gallery__dot:focus-visible{
     outline:2px solid var(--fg-accent);
     outline-offset:2px;
}
/* ---------- Tablet ---------- */
@media (min-width:601px){
.fgwiki-gallery{
    --fg-items:2;
    --fg-gap:18px;
    --fg-image-height:280px;
    --fg-side-blur:1.5px;
    padding-left:46px;
    padding-right:46px;
}
.fgwiki-gallery__slide:not(.is-center){
     transform:scale(.95);
    opacity:.6;
     filter:blur(var(--fg-side-blur));
}
.fgwiki-gallery__slide.is-center{
    transform:scale(1.03);
    opacity:1;
    filter:none;
    box-shadow:0 12px 28px rgba(255,42,42,.18);
    border-color:rgba(255,42,42,.30);
}
.fgwiki-gallery__caption{
     min-height:68px;
}
.fgwiki-gallery__button{
    width:40px;
    height:40px;
    font-size:21px;
}
}
/* ---------- Desktop ---------- */
@media (min-width:901px){
.fgwiki-gallery{
    --fg-items:3;
    --fg-image-height:300px;
    --fg-side-blur:2px;
    --fg-side-opacity:.55;
    padding-left:56px;
    padding-right:56px;
}
.fgwiki-gallery__slide:not(.is-center){
    opacity:var(--fg-side-opacity);
    transform:scale(.94);
}
.fgwiki-gallery__button{
    width:44px;
    height:44px;
    font-size:24px;
}
.fgwiki-gallery__caption{
    min-height:72px;
    font-size:14px;
}
}
/* کاهش انیمیشن */
@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 () {
    "use strict";
"use strict";
 
document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
    document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
const track = slider.querySelector(".fgwiki-gallery__track");
      const track = slider.querySelector(".fgwiki-gallery__track");
const viewport = slider.querySelector(".fgwiki-gallery__viewport");
      const originalSlides = Array.from(
const originalSlides = Array.from(
        slider.querySelectorAll(".fgwiki-gallery__slide")
slider.querySelectorAll(".fgwiki-gallery__slide")
      );
);
      const rightButton = slider.querySelector(".fgwiki-gallery__button--right");
const rightButton = slider.querySelector(".fgwiki-gallery__button--right");
      const leftButton = slider.querySelector(".fgwiki-gallery__button--left");
const leftButton = slider.querySelector(".fgwiki-gallery__button--left");
      const dotsContainer = slider.querySelector(".fgwiki-gallery__dots");
const dotsContainer = slider.querySelector(".fgwiki-gallery__dots");
 
if (
      if (!track || originalSlides.length === 0) {
!track ||
        return;
!viewport ||
      }
originalSlides.length === 0
 
){
      let currentIndex = 0;
return;
      let autoPlayTimer = null;
}
      let touchStartX = 0;
/* ---------------------- */
      let touchEndX = 0;
/* State */
      let isAnimating = false;
/* ---------------------- */
      const autoPlayDelay = 3500;
let currentIndex = 0;
 
let visibleItems = 1;
      function getVisibleItems() {
let slideWidth = 0;
        const value = getComputedStyle(slider)
let slideStep = 0;
          .getPropertyValue("--fg-items")
let totalSlides = originalSlides.length;
          .trim();
let autoPlayTimer = null;
 
let isAnimating = false;
        return Math.max(1, parseInt(value, 10) || 1);
let resizeTimer = null;
      }
let touchStartX = 0;
 
let touchCurrentX = 0;
      function cleanupClones() {
let pointerDown = false;
        Array.from(track.querySelectorAll(".is-clone")).forEach(function (node) {
const autoPlayDelay = 3500;
          node.remove();
/* ---------------------- */
        });
/* Helpers */
      }
/* ---------------------- */
 
function getVisibleItems(){
      function buildInfiniteTrack() {
const value = parseInt(
        cleanupClones();
getComputedStyle(slider)
 
.getPropertyValue("--fg-items"),
        const visibleItems = getVisibleItems();
10
        const slides = Array.from(track.children).filter(function (slide) {
);
          return !slide.classList.contains("is-clone");
return Math.max(1,value || 1);
        });
}
 
/* ---------------------- */
        const prependClones = slides.slice(-visibleItems).map(function (slide) {
function removeClones(){
          const clone = slide.cloneNode(true);
track
          clone.classList.add("is-clone");
.querySelectorAll(".is-clone")
          clone.setAttribute("aria-hidden", "true");
.forEach(function(node){
          return clone;
node.remove();
        });
});
 
}
        const appendClones = slides.slice(0, visibleItems).map(function (slide) {
/* ---------------------- */
          const clone = slide.cloneNode(true);
function cloneSlides(){
          clone.classList.add("is-clone");
removeClones();
          clone.setAttribute("aria-hidden", "true");
visibleItems = getVisibleItems();
          return clone;
const slides = Array.from(track.children)
        });
.filter(function(slide){
 
return !slide.classList.contains("is-clone");
        prependClones.forEach(function (clone) {
});
          track.insertBefore(clone, track.firstChild);
const before = slides
        });
.slice(-visibleItems)
 
.map(function(slide){
        appendClones.forEach(function (clone) {
const clone = slide.cloneNode(true);
          track.appendChild(clone);
clone.classList.add("is-clone");
        });
clone.setAttribute("aria-hidden","true");
 
return clone;
        currentIndex = visibleItems;
});
        updateSlider(false);
const after = slides
      }
.slice(0,visibleItems)
 
.map(function(slide){
      function getAllSlides() {
const clone = slide.cloneNode(true);
        return Array.from(track.querySelectorAll(".fgwiki-gallery__slide"));
clone.classList.add("is-clone");
      }
clone.setAttribute("aria-hidden","true");
 
return clone;
      function getRealSlidesCount() {
});
        return originalSlides.length;
before.forEach(function(node){
      }
track.insertBefore(node,track.firstChild);
 
});
      function getSlideStep() {
after.forEach(function(node){
        const slides = getAllSlides();
track.appendChild(node);
 
});
        if (slides.length < 2) {
currentIndex = visibleItems;
          return slides[0] ? slides[0].getBoundingClientRect().width : 0;
}
        }
/* ---------------------- */
 
function getSlides(){
        const firstSlide = slides[0].getBoundingClientRect();
return Array.from(
        const secondSlide = slides[1].getBoundingClientRect();
track.querySelectorAll(".fgwiki-gallery__slide")
 
);
        return Math.abs(secondSlide.left - firstSlide.left);
}
      }
/* ---------------------- */
 
function calculateSizes(){
      function updateDots() {
const slide = getSlides()[0];
        const visibleItems = getVisibleItems();
if(!slide){
        const realSlidesCount = getRealSlidesCount();
return;
        const maxDotIndex = Math.max(0, realSlidesCount - visibleItems);
}
        const realIndex = ((currentIndex - visibleItems) % realSlidesCount + realSlidesCount) % realSlidesCount;
slideWidth = slide.offsetWidth;
        const activeDotIndex = Math.min(realIndex, maxDotIndex);
const gap = parseFloat(
 
getComputedStyle(track).columnGap ||
        const dots = dotsContainer.querySelectorAll(".fgwiki-gallery__dot");
getComputedStyle(track).gap ||
 
0
        dots.forEach(function (dot, index) {
);
          const isActive = index === activeDotIndex;
slideStep = slideWidth + gap;
          dot.classList.toggle("is-active", isActive);
}
          dot.setAttribute("aria-current", isActive ? "true" : "false");
/* ---------------------- */
        });
function translate(immediate=false){
      }
const offset = currentIndex * slideStep;
 
if(immediate){
      function updateCenterState() {
track.style.transition="none";
        const visibleItems = getVisibleItems();
}else{
        const centerOffset = Math.floor(visibleItems / 2);
track.style.transition="";
        const centerIndex = currentIndex + centerOffset;
}
        const slides = getAllSlides();
/* RTL */
 
track.style.transform =
        slides.forEach(function (slide, index) {
"translate3d("+offset+"px,0,0)";
          slide.classList.toggle("is-center", index === centerIndex);
if(immediate){
        });
requestAnimationFrame(function(){
      }
track.style.transition="";
 
});
      function updateSlider(animate) {
}
        const step = getSlideStep();
}
        const offset = currentIndex * step;
/* ---------------------- */
 
function updateCenter(){
        if (!animate) {
const slides = getSlides();
          track.style.transition = "none";
slides.forEach(function(slide){
        } else {
slide.classList.remove("is-center");
          track.style.transition = "";
});
        }
const center =
 
currentIndex +
        track.style.transform = "translate3d(" + offset + "px, 0, 0)";
Math.floor(visibleItems/2);
 
if(slides[center]){
        updateDots();
slides[center]
        updateCenterState();
.classList.add("is-center");
 
}
        if (!animate) {
}
          requestAnimationFrame(function () {
/* ---------------------- */
            requestAnimationFrame(function () {
function updateDots(){
              track.style.transition = "";
const dots =
            });
dotsContainer.querySelectorAll(
          });
".fgwiki-gallery__dot"
        }
);
      }
const realIndex =
 
(
      function jumpIfNeeded() {
(
        const visibleItems = getVisibleItems();
currentIndex-visibleItems
        const realSlidesCount = getRealSlidesCount();
)%totalSlides+
 
totalSlides
        if (currentIndex >= realSlidesCount + visibleItems) {
)%totalSlides;
          currentIndex = visibleItems;
const active =
          updateSlider(false);
Math.min(
        } else if (currentIndex < visibleItems) {
realIndex,
          currentIndex = realSlidesCount + visibleItems - 1;
Math.max(0,totalSlides-visibleItems)
          updateSlider(false);
);
        }
dots.forEach(function(dot,index){
 
const state=index===active;
        updateCenterState();
dot.classList.toggle(
        updateDots();
"is-active",
      }
state
 
);
      function goToSlide(index) {
dot.setAttribute(
        if (isAnimating) {
"aria-current",
          return;
state
        }
);
 
});
        isAnimating = true;
}
        currentIndex = index;
/* ---------------------- */
        updateSlider(true);
function update(immediate=false){
 
calculateSizes();
        window.setTimeout(function () {
translate(immediate);
          jumpIfNeeded();
updateCenter();
          isAnimating = false;
updateDots();
        }, 680);
}
      }
/* ---------------------- */
 
function build(){
      function moveRight() {
cloneSlides();
        goToSlide(currentIndex + 1);
createDots();
      }
update(true);
 
}
      function moveLeft() {
/* ---------------------- */
        goToSlide(currentIndex - 1);
function debounceResize(){
      }
clearTimeout(resizeTimer);
 
resizeTimer=setTimeout(function(){
      function createDots() {
const logicalIndex=
        const visibleItems = getVisibleItems();
(
        const dotsCount = Math.max(1, getRealSlidesCount() - visibleItems + 1);
(
 
currentIndex-visibleItems
        dotsContainer.innerHTML = "";
)%totalSlides+
 
totalSlides
        for (let index = 0; index < dotsCount; index += 1) {
)%totalSlides;
          const dot = document.createElement("button");
build();
 
currentIndex=
          dot.type = "button";
visibleItems+
          dot.className = "fgwiki-gallery__dot";
logicalIndex;
          dot.setAttribute("aria-label", "نمایش اسلاید شماره " + (index + 1));
update(true);
 
},150);
          dot.addEventListener("click", function () {
}
            currentIndex = getVisibleItems() + index;
/* ---------------------- */
            updateSlider(true);
/* Movement Logic */
            restartAutoPlay();
/* ---------------------- */
          });
function normalizeIndex(){
 
const maxIndex =
          dotsContainer.appendChild(dot);
totalSlides + visibleItems;
        }
if(currentIndex >= maxIndex){
 
currentIndex = visibleItems;
        updateDots();
update(true);
      }
}
 
if(currentIndex < visibleItems){
      function startAutoPlay() {
currentIndex =
        stopAutoPlay();
totalSlides +
 
visibleItems -
        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
1;
          return;
update(true);
        }
}
 
}
        autoPlayTimer = window.setInterval(function () {
/* ---------------------- */
          moveRight();
function goToSlide(index){
        }, autoPlayDelay);
if(isAnimating){
      }
return;
 
}
      function stopAutoPlay() {
currentIndex = index;
        if (autoPlayTimer !== null) {
isAnimating = true;
          window.clearInterval(autoPlayTimer);
update(false);
          autoPlayTimer = null;
}
        }
/* ---------------------- */
      }
function moveRight(){
 
goToSlide(currentIndex + 1);
      function restartAutoPlay() {
}
        stopAutoPlay();
/* ---------------------- */
        startAutoPlay();
function moveLeft(){
      }
goToSlide(currentIndex - 1);
 
}
      rightButton.addEventListener("click", function () {
/* ---------------------- */
        moveRight();
/* Transition Handler */
        restartAutoPlay();
/* ---------------------- */
      });
track.addEventListener(
 
"transitionend",
      leftButton.addEventListener("click", function () {
function(event){
        moveLeft();
if(event.propertyName !== "transform"){
        restartAutoPlay();
return;
      });
}
 
if(!isAnimating){
      slider.addEventListener("mouseenter", stopAutoPlay);
return;
      slider.addEventListener("mouseleave", startAutoPlay);
}
      slider.addEventListener("focusin", stopAutoPlay);
normalizeIndex();
 
isAnimating = false;
      slider.addEventListener("focusout", function (event) {
});
        if (!slider.contains(event.relatedTarget)) {
/* ---------------------- */
          startAutoPlay();
/* Dots Navigation */
        }
/* ---------------------- */
      });
function createDots(){
 
if(!dotsContainer){
      slider.addEventListener(
return;
        "touchstart",
}
        function (event) {
const count =
          touchStartX = event.changedTouches[0].clientX;
Math.max(
          touchEndX = touchStartX;
1,
          stopAutoPlay();
totalSlides-visibleItems+1
        },
);
        { passive: true }
dotsContainer.innerHTML="";
      );
for(
 
let i=0;
      slider.addEventListener(
i<count;
        "touchmove",
i++
        function (event) {
){
          touchEndX = event.changedTouches[0].clientX;
const dot =
        },
document.createElement("button");
        { passive: true }
dot.type="button";
      );
dot.className =
 
"fgwiki-gallery__dot";
      slider.addEventListener(
dot.setAttribute(
        "touchend",
"aria-label",
        function () {
"نمایش اسلاید شماره "+(i+1)
          const swipeDistance = touchEndX - touchStartX;
);
 
dot.addEventListener(
          if (Math.abs(swipeDistance) > 45) {
"click",
            if (swipeDistance > 0) {
function(){
              moveRight();
if(isAnimating){
            } else {
return;
              moveLeft();
}
            }
currentIndex =
          }
visibleItems+i;
 
goToSlide(currentIndex);
          startAutoPlay();
restartAutoPlay();
        },
});
        { passive: true }
dotsContainer.appendChild(dot);
      );
}
 
updateDots();
      window.addEventListener("resize", function () {
}
        buildInfiniteTrack();
/* ---------------------- */
        createDots();
/* Buttons */
      });
/* ---------------------- */
 
if(rightButton){
      if ("IntersectionObserver" in window) {
rightButton.addEventListener(
        const observer = new IntersectionObserver(
"click",
          function (entries) {
function(){
            entries.forEach(function (entry) {
moveRight();
              if (entry.isIntersecting) {
restartAutoPlay();
                startAutoPlay();
});
              } else {
}
                stopAutoPlay();
if(leftButton){
              }
leftButton.addEventListener(
            });
"click",
          },
function(){
          {
moveLeft();
            threshold: 0.2
restartAutoPlay();
          }
});
        );
}
 
/* ---------------------- */
        observer.observe(slider);
/* Keyboard Support */
      } else {
/* ---------------------- */
        startAutoPlay();
slider.addEventListener(
      }
"keydown",
 
function(event){
      buildInfiniteTrack();
if(event.key==="ArrowLeft"){
      createDots();
moveLeft();
    });
restartAutoPlay();
  })();
}
if(event.key==="ArrowRight"){
moveRight();
restartAutoPlay();
}
});
slider.setAttribute(
"tabindex",
"0"
);
/* ---------------------- */
/* Hover Pause */
/* ---------------------- */
slider.addEventListener(
"mouseenter",
stopAutoPlay
);
slider.addEventListener(
"mouseleave",
startAutoPlay
);
slider.addEventListener(
"focusin",
stopAutoPlay
);
slider.addEventListener(
"focusout",
function(event){
if(!slider.contains(event.relatedTarget)){
startAutoPlay();
}
});
/* ---------------------- */
/* Touch / Swipe */
/* ---------------------- */
slider.addEventListener(
"touchstart",
function(event){
if(event.touches.length !== 1){
return;
}
pointerDown = true;
touchStartX =
event.touches[0].clientX;
touchCurrentX =
touchStartX;
stopAutoPlay();
},
{
passive:true
}
);
slider.addEventListener(
"touchmove",
function(event){
if(!pointerDown){
return;
}
touchCurrentX =
event.touches[0].clientX;
},
{
passive:true
}
);
slider.addEventListener(
"touchend",
function(){
if(!pointerDown){
return;
}
pointerDown=false;
const distance =
touchCurrentX -
touchStartX;
if(Math.abs(distance)>45){
if(distance>0){
moveLeft();
}else{
moveRight();
}
}
startAutoPlay();
},
{
passive:true
}
);
/* ---------------------- */
/* Auto Play */
/* ---------------------- */
function startAutoPlay(){
stopAutoPlay();
if(
window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches
){
return;
}
autoPlayTimer =
setInterval(function(){
if(!isAnimating){
moveRight();
}
},autoPlayDelay);
}
function stopAutoPlay(){
if(autoPlayTimer!==null){
clearInterval(autoPlayTimer);
autoPlayTimer=null;
}
}
function restartAutoPlay(){
stopAutoPlay();
startAutoPlay();
}
/* ---------------------- */
/* Visibility Observer */
/* ---------------------- */
if("IntersectionObserver" in window){
const observer =
new IntersectionObserver(
function(entries){
entries.forEach(function(entry){
if(entry.isIntersecting){
startAutoPlay();
}else{
stopAutoPlay();
}
});
},
{
threshold:.25
}
);
observer.observe(slider);
}else{
startAutoPlay();
}
/* ---------------------- */
/* Resize */
/* ---------------------- */
window.addEventListener(
"resize",
debounceResize
);
/* ---------------------- */
/* Initial Build */
/* ---------------------- */
build();
/* ---------------------- */
/* Accessibility */
/* ---------------------- */
slider.setAttribute(
"role",
"region"
);
slider.setAttribute(
"aria-label",
"گالری تصاویر"
);
track.setAttribute(
"aria-live",
"polite"
);
});
});
})();
</script>
</script>


</html>
</html>

نسخهٔ ‏۶ اوت ۲۰۲۶، ساعت ۰۸:۰۸


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