پرش به محتوا

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

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


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