Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۵۶

2026-07-18T08:56:14Z

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۵۵

2026-07-18T08:55:25Z

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۵۳

2026-07-18T08:53:40Z

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۴۶

2026-07-18T08:46:53Z

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۰۴

2026-07-18T08:04:29Z

Esfandiari: صفحه‌ای تازه حاوی «

2026-07-18T08:02:06Z

صفحه‌ای تازه حاوی «<html> <div class="fgwiki-gallery" id="fgwiki-gallery-1" dir="rtl" aria-label="گالری تصاویر" > <div class="fgwiki-galleryviewport"> <div class="fgwiki-gallerytrack">  <figure class="fgwiki-galleryslide"> <img src="https://dl.faraghaib.ir/m/106/3.jpg" alt="توضیح تصویر شماره ۱" loading="eager" > <figcapt...» ایجاد کرد

صفحهٔ تازه
<html>
<div
class="fgwiki-gallery"
id="fgwiki-gallery-1"
dir="rtl"
aria-label="گالری تصاویر"
>
<div class="fgwiki-galleryviewport">
<div class="fgwiki-gallerytrack">


<figure class="fgwiki-galleryslide">
<img
src="https://dl.faraghaib.ir/m/106/3.jpg"
alt="توضیح تصویر شماره ۱"
loading="eager"
>
<figcaption class="fgwiki-gallerycaption">
فروش نقد و اقساط موبایل
</figcaption>
</figure>


<figure class="fgwiki-galleryslide">
<img
src="https://dl.faraghaib.ir/m/106/5.jpg"
alt="توضیح تصویر شماره ۲"
loading="lazy"
>
<figcaption class="fgwiki-gallerycaption">
انواع گوشی های پرچم دار
</figcaption>
</figure>


<figure class="fgwiki-galleryslide">
<img
src="https://dl.faraghaib.ir/m/106/7.jpg"
alt="توضیح تصویر شماره ۳"
loading="lazy"
>
<figcaption class="fgwiki-gallerycaption">
انواع هندز فری
</figcaption>
</figure>


<figure class="fgwiki-galleryslide">
<img
src="https://dl.faraghaib.ir/m/106/8.jpg"
alt="توضیح تصویر شماره ۴"
loading="lazy"
>
<figcaption class="fgwiki-gallerycaption">
شارژر و کابل
</figcaption>
</figure>


<figure class="fgwiki-galleryslide">
<img
src="https://dl.faraghaib.ir/m/106/9.jpg"
alt="توضیح تصویر شماره ۵"
loading="lazy"
>
<figcaption class="fgwiki-gallerycaption">
هولدری های باکیفیت
</figcaption>
</figure>


<figure class="fgwiki-galleryslide">
<img
src="IMAGE_URL_6"
alt="توضیح تصویر شماره ۶"
loading="lazy"
>
<figcaption class="fgwiki-gallerycaption">
کپشن یا توضیحات مربوط به تصویر شماره ۶
</figcaption>
</figure>

</div>
</div>


<button
class="fgwiki-gallerybutton fgwiki-gallerybutton--right"
type="button"
aria-label="تصویر قبلی"
>
❯
</button>


<button
class="fgwiki-gallerybutton fgwiki-gallerybutton--left"
type="button"
aria-label="تصویر بعدی"
>
❮
</button>


<div
class="fgwiki-gallerydots"
aria-label="ناوبری گالری"
></div>
</div>

<style>
/* ==============================
تنظیمات اصلی اسلایدر
============================== /

.fgwiki-gallery,
.fgwiki-gallery {
box-sizing: border-box;
}

.fgwiki-gallery {
--fg-items: 3;
--fg-gap: 16px;
--fg-radius: 14px;
--fg-image-height: 220px;
--fg-caption-bg: #ffffff;
--fg-caption-color: #222222;
--fg-accent: #1473e6;

position: relative;
width: min(100%, 1200px);
margin: 24px auto;
padding: 0 48px 36px;
direction: rtl;
font-family: iransans, Arial, sans-serif;
}

.fgwiki-galleryviewport {
width: 100%;
overflow: hidden;
border-radius: var(--fg-radius);
touch-action: pan-y;
}

.fgwiki-gallerytrack {
display: flex;
flex-direction: row;
gap: var(--fg-gap);
width: 100%;
transform: translate3d(0, 0, 0);
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}

/* ==============================
کارت هر تصویر
============================== /

.fgwiki-galleryslide {
position: relative;
flex: 0 0 calc(
(100% - (var(--fg-items) - 1) var(--fg-gap)) / var(--fg-items)
);
min-width: 0;
margin: 0;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--fg-radius);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
}

.fgwiki-galleryslide img {
display: block;
width: 100%;
height: var(--fg-image-height);
margin: 0;
object-fit: cover;
object-position: center;
border: 0;
transition: transform 400ms ease;
}

.fgwiki-galleryslide:hover img {
transform: scale(1.04);
}

/* ==============================
کپشن تصاویر
============================== /

.fgwiki-gallerycaption {
position: relative;
z-index: 2;
min-height: 56px;
padding: 14px 16px;
overflow: hidden;
color: var(--fg-caption-color);
background: var(--fg-caption-bg);
font-size: 14px;
font-weight: 600;
line-height: 1.8;
text-align: right;
}

/ ==============================
دکمه‌های جهت
============================== /

.fgwiki-gallerybutton {
position: absolute;
top: calc(50% - 18px);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
color: #ffffff;
background: rgba(20, 20, 20, 0.76);
border: 0;
border-radius: 50%;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
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-gallerybutton:hover {
background: var(--fg-accent);
transform: translateY(-50%) scale(1.08);
}

.fgwiki-gallerybutton:focus-visible {
outline: 3px solid rgba(20, 115, 230, 0.35);
outline-offset: 3px;
}

.fgwiki-gallerybutton--right {
right: 0;
}

.fgwiki-gallerybutton--left {
left: 0;
}

/ ==============================
نقطه‌های پایین اسلایدر
============================== /

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

.fgwiki-gallerydot {
width: 8px;
height: 8px;
padding: 0;
background: #c8c8c8;
border: 0;
border-radius: 50%;
cursor: pointer;
transition:
width 250ms ease,
background-color 250ms ease;
}

.fgwiki-gallerydot.is-active {
width: 24px;
background: var(--fg-accent);
border-radius: 10px;
}

.fgwiki-gallerydot:focus-visible {
outline: 2px solid var(--fg-accent);
outline-offset: 2px;
}

/ ==============================
نمایش دو تصویر در تبلت
============================== /

@media (max-width: 900px) {
.fgwiki-gallery {
--fg-items: 2;
--fg-image-height: 200px;

padding-right: 42px;
padding-left: 42px;
}

.fgwiki-gallerybutton {
width: 38px;
height: 38px;
font-size: 21px;
}
}

/ ==============================
نمایش یک تصویر در موبایل
============================== /

@media (max-width: 600px) {
.fgwiki-gallery {
--fg-items: 1;
--fg-gap: 12px;
--fg-image-height: 210px;

width: 100%;
padding-right: 36px;
padding-left: 36px;
}

.fgwiki-gallerycaption {
min-height: 52px;
padding: 12px 14px;
font-size: 13px;
}

.fgwiki-gallerybutton {
width: 34px;
height: 34px;
font-size: 19px;
}
}

/ غیرفعال‌شدن انیمیشن برای کاربران حساس به حرکت /
@media (prefers-reduced-motion: reduce) {
.fgwiki-gallerytrack,
.fgwiki-galleryslide img,
.fgwiki-gallerybutton,
.fgwiki-gallerydot {
transition: none;
}
}
</style>

<script>
(function () {
"use strict";

document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) {
const track = slider.querySelector(".fgwiki-gallerytrack");
const slides = Array.from(
slider.querySelectorAll(".fgwiki-galleryslide")
);
const rightButton = slider.querySelector(
".fgwiki-gallerybutton--right"
);
const leftButton = slider.querySelector(
".fgwiki-gallerybutton--left"
);
const dotsContainer = slider.querySelector(
".fgwiki-gallerydots"
);

if (!track || slides.length === 0) {
return;
}

let currentIndex = 0;
let autoPlayTimer = null;
let touchStartX = 0;
let touchEndX = 0;

/ زمان حرکت خودکار برحسب میلی‌ثانیه /
const autoPlayDelay = 3500;

function getVisibleItems() {
const value = getComputedStyle(slider)
.getPropertyValue("--fg-items")
.trim();

return Math.max(1, parseInt(value, 10) || 1);
}

function getMaximumIndex() {
return Math.max(0, slides.length - getVisibleItems());
}

function getSlideStep() {
if (slides.length < 2) {
return slides[0].getBoundingClientRect().width;
}

const firstSlide = slides[0].getBoundingClientRect();
const secondSlide = slides[1].getBoundingClientRect();

return Math.abs(secondSlide.left - firstSlide.left);
}

function normalizeIndex(index) {
const maximumIndex = getMaximumIndex();

if (index > maximumIndex) {
return 0;
}

if (index < 0) {
return maximumIndex;
}

return index;
}

function createDots() {
const maximumIndex = getMaximumIndex();

dotsContainer.innerHTML = "";

for (let index = 0; index <= maximumIndex; index += 1) {
const dot = document.createElement("button");

dot.type = "button";
dot.className = "fgwiki-gallerydot";
dot.setAttribute(
"aria-label",
"نمایش گروه تصاویر شماره " + (index + 1)
);

dot.addEventListener("click", function () {
goToSlide(index);
restartAutoPlay();
});

dotsContainer.appendChild(dot);
}
}

function updateDots() {
const dots = dotsContainer.querySelectorAll(
".fgwiki-gallery__dot"
);

dots.forEach(function (dot, index) {
const isActive = index === currentIndex;

dot.classList.toggle("is-active", isActive);
dot.setAttribute(
"aria-current",
isActive ? "true" : "false"
);
});
}

function updateSlider(animate) {
const maximumIndex = getMaximumIndex();

if (currentIndex > maximumIndex) {
currentIndex = maximumIndex;
}

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

const offset = currentIndex getSlideStep();

/*
* مقدار مثبت باعث حرکت مجموعه تصاویر
* به سمت راست در ساختار RTL می‌شود.
/
track.style.transform =
"translate3d(" + offset + "px, 0, 0)";

updateDots();

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

function goToSlide(index) {
currentIndex = normalizeIndex(index);
updateSlider(true);
}

/ حرکت تصاویر به سمت راست /
function moveRight() {
goToSlide(currentIndex + 1);
}

/ حرکت تصاویر به سمت چپ */
function moveLeft() {
goToSlide(currentIndex - 1);
}

function startAutoPlay() {
stopAutoPlay();

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

autoPlayTimer = window.setInterval(function () {
moveRight();
}, autoPlayDelay);
}

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

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

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

leftButton.addEventListener("click", function () {
moveLeft();
restartAutoPlay();
});

slider.addEventListener("mouseenter", stopAutoPlay);
slider.addEventListener("mouseleave", startAutoPlay);
slider.addEventListener("focusin", stopAutoPlay);

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

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

slider.addEventListener(
"touchmove",
function (event) {
touchEndX = event.changedTouches[0].clientX;
},
{ passive: true }
);

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

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

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

window.addEventListener("resize", function () {
createDots();
updateSlider(false);
});

if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
startAutoPlay();
} else {
stopAutoPlay();
}
});
},
{
threshold: 0.15
}
);

observer.observe(slider);
} else {
startAutoPlay();
}

createDots();
updateSlider(false);
});
})();
</script>
</html>

الگو:اسلایدر - تاریخچهٔ نسخه‌ها

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۵۶

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۵۵

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۵۳

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۴۶

Esfandiari در ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۰۴