الگو:اسلایدر/دماوندپلیمر: تفاوت میان نسخهها
بدون خلاصۀ ویرایش برچسب: برگرداندهشده |
بدون خلاصۀ ویرایش |
||
| (۱۷ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<br> | |||
<html> | <html> | ||
< | <div | ||
class="fgwiki-gallery" | |||
-- | id="fgwiki-gallery-1" | ||
dir="rtl" | |||
- | aria-label="دماوند پلیمر تولید کننده مخازن پلی اتیلن" | ||
> | |||
- | <div class="fgwiki-gallery__viewport"> | ||
<div class="fgwiki-gallery__track"> | |||
<!-- اسلاید ۱ | مخازن پلی اتیلن --> | |||
<figure class="fgwiki-gallery__slide" style="box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);"> | |||
<a href="https://fa.faraghaib.ir/wiki/%D9%85%D8%AE%D8%B2%D9%86_%D9%BE%D9%84%DB%8C_%D8%A7%D8%AA%DB%8C%D9%84%D9%86_%D8%B3%D9%87_%D9%84%D8%A7%DB%8C%D9%87_%D8%AF%D9%85%D8%A7%D9%88%D9%86%D8%AF_%D9%BE%D9%84%DB%8C%D9%85%D8%B1_%D8%AF%D8%B1_%D8%B8%D8%B1%D9%81%DB%8C%D8%AA%E2%80%8C%D9%87%D8%A7%DB%8C_%D9%85%D8%AE%D8%AA%D9%84%D9%81"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260006/26000605.jpg" | |||
alt="مخزن پلی اتیلن سه لایه دماوند پلیمر در ظرفیتهای مختلف" | |||
loading="eager" | |||
> | |||
<figcaption class="fgwiki-gallery__caption"> | |||
مخزن پلی اتیلن سه لایه | |||
</figcaption> | |||
</a> | |||
</figure> | |||
<!-- اسلاید ۲ | مخزن آب عمودی --> | |||
<figure class="fgwiki-gallery__slide"> | |||
<a href="https://fa.faraghaib.ir/wiki/%D9%85%D8%AE%D8%B2%D9%86_%D8%A2%D8%A8_%D9%BE%D9%84%DB%8C_%D8%A7%D8%AA%DB%8C%D9%84%D9%86_%D8%B9%D9%85%D9%88%D8%AF%DB%8C_%D8%B3%D9%87_%D9%84%D8%A7%DB%8C%D9%87_%D9%85%D9%82%D8%A7%D9%88%D9%85_%D8%AF%D8%B1_%D8%A8%D8%B1%D8%A7%D8%A8%D8%B1_%D8%A7%D8%B4%D8%B9%D9%87_UV"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260006/26000610.jpg" | |||
alt="مخزن آب پلی اتیلن عمودی سه لایه مقاوم در برابر اشعه UV" | |||
loading="lazy" | |||
> | |||
<figcaption class="fgwiki-gallery__caption"> | |||
مخزن مقاوم در برابر اشعه UV | |||
</figcaption> | |||
</a> | |||
</figure> | |||
<!-- اسلاید ۳ | مخزن افقی --> | |||
<figure class="fgwiki-gallery__slide"> | |||
<a href="https://fa.faraghaib.ir/wiki/%D9%85%D8%AE%D8%B2%D9%86_%D8%A7%D9%81%D9%82%DB%8C_%D9%BE%D9%84%DB%8C_%D8%A7%D8%AA%DB%8C%D9%84%D9%86_%D8%AF%D9%85%D8%A7%D9%88%D9%86%D8%AF_%D9%BE%D9%84%DB%8C%D9%85%D8%B1_%D9%85%D9%86%D8%A7%D8%B3%D8%A8_%D8%B0%D8%AE%DB%8C%D8%B1%D9%87_%D8%A2%D8%A8_%D9%88_%D9%85%D8%A7%DB%8C%D8%B9%D8%A7%D8%AA"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260006/26000609.jpg" | |||
alt="مخزن افقی پلی اتیلن دماوند پلیمر مناسب ذخیره آب و مایعات" | |||
loading="lazy" | |||
> | |||
<figcaption class="fgwiki-gallery__caption"> | |||
مخزن افقی پلی اتیلن | |||
</figcaption> | |||
</a> | |||
</figure> | |||
<!-- اسلاید ۴ | مخزن زیرپله --> | |||
<figure class="fgwiki-gallery__slide"> | |||
<a href="https://fa.faraghaib.ir/wiki/%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86_%D8%B1%D8%A7%D9%87%DA%A9%D8%A7%D8%B1_%D8%B0%D8%AE%DB%8C%D8%B1%D9%87_%D8%A2%D8%A8_%D8%AF%D8%B1_%D8%A2%D9%BE%D8%A7%D8%B1%D8%AA%D9%85%D8%A7%D9%86%D8%9B_%D9%85%D8%AE%D8%B2%D9%86_%D8%B2%DB%8C%D8%B1%D9%BE%D9%84%D9%87%E2%80%8C%D8%A7%DB%8C_%D8%AF%D9%85%D8%A7%D9%88%D9%86%D8%AF_%D9%BE%D9%84%DB%8C%D9%85%D8%B1"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260006/26000615.jpg" | |||
alt="مخزن زیرپله پلی اتیلن مناسب آپارتمان و فضای محدود" | |||
loading="lazy" | |||
> | |||
<figcaption class="fgwiki-gallery__caption"> | |||
مخزن زیرپله پلی اتیلن | |||
</figcaption> | |||
</a> | |||
</figure> | |||
<!-- اسلاید ۵ | مخزن آسانرو --> | |||
<figure class="fgwiki-gallery__slide"> | |||
<a href="https://fa.faraghaib.ir/wiki/%D9%85%D8%AE%D8%B2%D9%86_%D8%A2%D8%B3%D8%A7%D9%86%E2%80%8C%D8%B1%D9%88_%D9%BE%D9%84%DB%8C_%D8%A7%D8%AA%DB%8C%D9%84%D9%86_%D8%AF%D9%85%D8%A7%D9%88%D9%86%D8%AF_%D9%BE%D9%84%DB%8C%D9%85%D8%B1%D8%9B_%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B1%D8%A7%D9%87%D8%B1%D9%88%D9%87%D8%A7%DB%8C_%D8%A8%D8%A7%D8%B1%DB%8C%DA%A9_%D9%88_%D9%81%D8%B6%D8%A7%D9%87%D8%A7%DB%8C_%D9%85%D8%AD%D8%AF%D9%88%D8%AF"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260006/26000616.jpg" | |||
alt="مخزن آسانرو پلی اتیلن دماوند پلیمر مناسب راهرو و درب باریک" | |||
loading="lazy" | |||
> | |||
<figcaption class="fgwiki-gallery__caption"> | |||
مخزن آسانرو پلی اتیلن | |||
</figcaption> | |||
</a> | |||
</figure> | |||
<!-- اسلاید ۶ | قیمت و خرید --> | |||
<figure class="fgwiki-gallery__slide"> | |||
<a href="https://fa.faraghaib.ir/wiki/%D8%AE%D8%B1%DB%8C%D8%AF_%D9%85%D8%AE%D8%B2%D9%86_%D9%BE%D9%84%DB%8C_%D8%A7%D8%AA%DB%8C%D9%84%D9%86_%D8%A7%D8%B2_%DA%A9%D8%A7%D8%B1%D8%AE%D8%A7%D9%86%D9%87_%D8%AF%D9%85%D8%A7%D9%88%D9%86%D8%AF_%D9%BE%D9%84%DB%8C%D9%85%D8%B1_%D8%A8%D8%A7_%D9%82%DB%8C%D9%85%D8%AA_%D9%85%D9%86%D8%A7%D8%B3%D8%A8"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260006/26000605.jpg" | |||
alt="خرید مخزن پلی اتیلن از کارخانه دماوند پلیمر با قیمت مناسب" | |||
loading="lazy" | |||
> | |||
<figcaption class="fgwiki-gallery__caption"> | |||
خرید مخزن پلی اتیلن از کارخانه | |||
</figcaption> | |||
</a> | |||
</figure> | |||
</div> | |||
</div> | |||
<button | |||
class="fgwiki-gallery__button fgwiki-gallery__button--right" | |||
type="button" | |||
aria-label="نمایش اسلاید بعدی" | |||
> | |||
❯ | |||
</button> | |||
<button | |||
class="fgwiki-gallery__button fgwiki-gallery__button--left" | |||
type="button" | |||
aria-label="نمایش اسلاید قبلی" | |||
> | |||
❮ | |||
</button> | |||
<div class="fgwiki-gallery__dots" aria-label="ناوبری گالری"></div> | |||
</div> | |||
.fgwiki- | <style> | ||
.fgwiki-gallery, | |||
} | .fgwiki-gallery * { | ||
box-sizing: border-box; | |||
} | |||
.fgwiki- | .fgwiki-gallery { | ||
--fg-items: 3; | |||
--fg-gap: 18px; | |||
--fg-radius: 18px; | |||
--fg-image-height: 300px; | |||
--fg-side-blur: 2px; | |||
--fg-side-opacity: 0.55; | |||
--fg-accent: #1473e6; | |||
--fg-card-bg: #ffffff; | |||
--fg-image-bg: #f5f7fa; | |||
--fg-caption-bg: #ffffff; | |||
--fg-caption-color: #1f2937; | |||
position: relative; | |||
width: min(100%, 1240px); | |||
margin: 28px auto; | |||
padding: 0 56px 42px; | |||
direction: rtl; | |||
font-family: iransans, Arial, sans-serif; | |||
} | |||
} | |||
.fgwiki- | .fgwiki-gallery__viewport { | ||
width: 100%; | |||
overflow: hidden; | |||
border-radius: var(--fg-radius); | |||
} | touch-action: pan-y; | ||
} | |||
.fgwiki- | .fgwiki-gallery__track { | ||
display: flex; | |||
flex-direction: row; | |||
gap: var(--fg-gap); | |||
width: 100%; | |||
transform: translate3d(0, 0, 0); | |||
transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1); | |||
will-change: transform; | |||
} | } | ||
.fgwiki-gallery__slide { | .fgwiki-gallery__slide { | ||
border | flex: 0 0 calc( | ||
box-shadow: 0 | (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 rgba(0, 0, 0, 0.08); | |||
border-radius: var(--fg-radius); | |||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); | |||
transition: | |||
transform 450ms ease, | |||
filter 450ms ease, | |||
opacity 450ms ease, | |||
box-shadow 450ms ease; | |||
} | } | ||
.fgwiki-gallery__slide | .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 { | .fgwiki-gallery__caption { | ||
min-height: | min-height: 72px; | ||
font-size: | padding: 14px 16px 16px; | ||
color: var(--fg-caption-color); | |||
border- | 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 16px 36px rgba(20, 115, 230, 0.18); | |||
border-color: rgba(20, 115, 230, 0.18); | |||
} | } | ||
.fgwiki-gallery__button { | .fgwiki-gallery__button { | ||
width: | position: absolute; | ||
height: | top: calc(50% - 24px); | ||
z-index: 15; | |||
background: | display: flex; | ||
align-items: center; | |||
justify-content: center; | |||
width: 44px; | |||
height: 44px; | |||
padding: 0; | |||
color: #ffffff; | |||
background: rgba(17, 24, 39, 0.78); | |||
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: | background: var(--fg-accent); | ||
transform: translateY(-50%) scale(1.08); | |||
} | } | ||
.fgwiki- | .fgwiki-gallery__button:focus-visible { | ||
outline: 3px solid rgba(20, 115, 230, 0.30); | |||
outline-offset: 3px; | |||
} | } | ||
.fgwiki-gallery__button--right { | |||
.fgwiki- | right: 0; | ||
} | } | ||
.fgwiki- | .fgwiki-gallery__button--left { | ||
left: 0; | |||
} | } | ||
.fgwiki- | .fgwiki-gallery__dots { | ||
position: absolute; | |||
right: 50%; | |||
bottom: 6px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 7px; | |||
transform: translateX(50%); | |||
} | } | ||
.fgwiki- | .fgwiki-gallery__dot { | ||
width: 9px; | |||
height: 9px; | |||
padding: 0; | |||
background: #c7ced8; | |||
border: 0; | |||
border- | border-radius: 50%; | ||
cursor: pointer; | |||
transition: | |||
width 250ms ease, | |||
background-color 250ms ease, | |||
opacity 250ms ease; | |||
} | } | ||
.fgwiki-gallery__dot.is-active { | .fgwiki-gallery__dot.is-active { | ||
background: | width: 24px; | ||
background: var(--fg-accent); | |||
border-radius: 999px; | |||
} | } | ||
.fgwiki-gallery__dot:focus-visible { | |||
.fgwiki- | outline: 2px solid var(--fg-accent); | ||
outline-offset: 2px; | |||
} | } | ||
@media (max-width: 900px) { | |||
.fgwiki-gallery { | |||
--fg-items: 2; | |||
--fg-image-height: 280px; | |||
--fg-side-blur: 1.5px; | |||
padding-right: 46px; | |||
padding-left: 46px; | |||
} | |||
.fgwiki-gallery__caption { | |||
min-height: 68px; | |||
font-size: 13px; | |||
} | |||
.fgwiki-gallery__button { | |||
width: 40px; | |||
height: 40px; | |||
font-size: 21px; | |||
} | } | ||
} | |||
@media (max-width: 600px) { | |||
.fgwiki-gallery { | |||
--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__slide.is-center, | |||
.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; | |||
} | } | ||
} | |||
position:relative; | |||
left:50%; | |||
right:50%; | |||
margin-left:-50vw; | |||
margin-right:-50vw; | |||
width:100vw; | |||
overflow:hidden; | |||
</style> | |||
<script> | |||
(function () { | |||
"use strict"; | |||
const | document.querySelectorAll(".fgwiki-gallery").forEach(function (slider) { | ||
const | 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 (!track || originalSlides.length === 0) { | |||
return; | |||
} | |||
let currentIndex = 0; | |||
let autoPlayTimer = null; | |||
let touchStartX = 0; | |||
let touchEndX = 0; | |||
let isAnimating = false; | |||
const autoPlayDelay = 3500; | |||
const | |||
const | function getVisibleItems() { | ||
const value = getComputedStyle(slider) | |||
.getPropertyValue("--fg-items") | |||
.trim(); | |||
return Math.max(1, parseInt(value, 10) || 1); | |||
} | |||
function cleanupClones() { | |||
Array.from(track.querySelectorAll(".is-clone")).forEach(function (node) { | |||
node.remove(); | |||
}); | |||
} | |||
function buildInfiniteTrack() { | |||
cleanupClones(); | |||
const visibleItems = getVisibleItems(); | |||
track. | 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; | currentIndex = visibleItems; | ||
updateSlider(false); | updateSlider(false); | ||
} | } | ||
function getAllSlides() { | |||
return Array.from(track.querySelectorAll(".fgwiki-gallery__slide")); | |||
} | |||
function getRealSlidesCount() { | |||
return originalSlides.length; | |||
return; | |||
} | } | ||
function getSlideStep() { | |||
const slides = getAllSlides(); | |||
if (slides.length < 2) { | |||
return slides[0] ? slides[0].getBoundingClientRect().width : 0; | |||
} | |||
const firstSlide = slides[0].getBoundingClientRect(); | |||
const secondSlide = slides[1].getBoundingClientRect(); | |||
return Math.abs(secondSlide.left - firstSlide.left); | |||
} | |||
function updateDots() { | |||
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"); | |||
dots.forEach(function (dot, index) { | |||
const isActive = index === activeDotIndex; | |||
dot.classList.toggle("is-active", isActive); | |||
dot.setAttribute("aria-current", isActive ? "true" : "false"); | |||
}); | |||
} | |||
function updateCenterState() { | |||
const visibleItems = getVisibleItems(); | |||
const centerOffset = Math.floor(visibleItems / 2); | |||
const centerIndex = currentIndex + centerOffset; | |||
const slides = getAllSlides(); | |||
); | |||
slides.forEach(function (slide, index) { | |||
slide.classList.toggle("is-center", index === centerIndex); | |||
}); | }); | ||
} | |||
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(); | |||
if (!animate) { | |||
requestAnimationFrame(function () { | |||
requestAnimationFrame(function () { | |||
track.style.transition = ""; | |||
}); | |||
}); | |||
} | |||
} | } | ||
function jumpIfNeeded() { | |||
const visibleItems = getVisibleItems(); | |||
const realSlidesCount = getRealSlidesCount(); | |||
if (currentIndex >= realSlidesCount + visibleItems) { | |||
currentIndex = visibleItems; | |||
updateSlider(false); | |||
} else if (currentIndex < visibleItems) { | |||
currentIndex = realSlidesCount + visibleItems - 1; | |||
updateSlider(false); | |||
} | |||
updateCenterState(); | |||
updateDots(); | |||
) | |||
} | } | ||
function goToSlide(index) { | |||
if (isAnimating) { | |||
return; | |||
} | |||
isAnimating = true; | |||
currentIndex = index; | |||
updateSlider(true); | |||
window.setTimeout(function () { | |||
jumpIfNeeded(); | |||
isAnimating = false; | |||
}, 680); | |||
} | } | ||
function moveRight() { | |||
goToSlide(currentIndex + 1); | |||
} | |||
function moveLeft() { | |||
goToSlide(currentIndex - 1); | |||
} | |||
function createDots() { | |||
const visibleItems = getVisibleItems(); | |||
const dotsCount = Math.max(1, getRealSlidesCount() - visibleItems + 1); | |||
dotsContainer.innerHTML = ""; | |||
for (let index = 0; index < dotsCount; index += 1) { | |||
const dot = document.createElement("button"); | |||
dot.type = "button"; | |||
dot.className = "fgwiki-gallery__dot"; | |||
dot.setAttribute("aria-label", "نمایش اسلاید شماره " + (index + 1)); | |||
dot.addEventListener("click", function () { | |||
currentIndex = getVisibleItems() + index; | |||
updateSlider(true); | |||
restartAutoPlay(); | |||
}); | |||
dotsContainer.appendChild(dot); | |||
} | } | ||
updateDots(); | |||
} | } | ||
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 () { | |||
buildInfiniteTrack(); | |||
createDots(); | |||
}); | |||
if ("IntersectionObserver" in window) { | |||
const observer = new IntersectionObserver( | |||
function (entries) { | |||
entries.forEach(function (entry) { | |||
if (entry.isIntersecting) { | |||
startAutoPlay(); | |||
} else { | |||
stopAutoPlay(); | |||
} | |||
}); | |||
}, | |||
{ | |||
threshold: 0.2 | |||
} | |||
); | |||
observer.observe(slider); | |||
} else { | |||
startAutoPlay(); | |||
} | |||
buildInfiniteTrack(); | |||
</ | createDots(); | ||
}); | |||
})(); | |||
</script> | |||
</html> | </html> | ||