الگو:کانتینر اسلایدر و پس زمینه: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (۲ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
| خط ۸۴: | خط ۸۳: | ||
<img | <img | ||
src="https://dl.faraghaib.ir/m/260015-01/260015-01-17.jpg" | src="https://dl.faraghaib.ir/m/260015-01/260015-01-17.jpg" | ||
alt="طراحی اختصاصی کابینت یاشیل" | |||
loading="lazy"> | |||
<div class="yasheel-card-content"> | |||
<h3>طراحی اختصاصی</h3> | |||
</div> | |||
</a> | |||
</article> | |||
<!-- کارت 6 --> | |||
<article class="yasheel-card"> | |||
<a href="#" aria-label="طراحی اختصاصی کابینت یاشیل"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260015-01/260015-01-28.jpg" | |||
alt="طراحی اختصاصی کابینت یاشیل" | |||
loading="lazy"> | |||
<div class="yasheel-card-content"> | |||
<h3>طراحی اختصاصی</h3> | |||
</div> | |||
</a> | |||
</article> | |||
<!-- کارت 7 --> | |||
<article class="yasheel-card"> | |||
<a href="#" aria-label="طراحی اختصاصی کابینت یاشیل"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260015-01/260015-01-49.jpg" | |||
alt="طراحی اختصاصی کابینت یاشیل" | alt="طراحی اختصاصی کابینت یاشیل" | ||
loading="lazy"> | loading="lazy"> | ||
| خط ۲۱۴: | خط ۲۳۹: | ||
.yasheel-card{ | .yasheel-card{ | ||
flex:0 0 | /* موبایل: یک کارت */ | ||
flex:0 0 100%; | |||
scroll-snap-align:start; | scroll-snap-align:start; | ||
| خط ۴۲۵: | خط ۴۵۱: | ||
function visibleCards(){ | function visibleCards(){ | ||
/* موبایل: یک کارت */ | |||
if(window.innerWidth < 600){ | if(window.innerWidth < 600){ | ||
return | return 1; | ||
} | } | ||
| خط ۴۸۴: | خط ۵۱۱: | ||
const move = getMove(); | const move = getMove(); | ||
track.scrollTo({ | track.scrollTo({ | ||
| خط ۵۶۹: | خط ۵۹۱: | ||
}else{ | }else{ | ||
goToSlide(0); | goToSlide(0); | ||
| خط ۵۹۸: | خط ۶۱۵: | ||
}else{ | }else{ | ||
goToSlide(max); | goToSlide(max); | ||
| خط ۶۱۰: | خط ۶۲۲: | ||
} | } | ||
); | ); | ||
/* ===================================== | |||
حرکت خودکار هر 3 ثانیه | |||
===================================== */ | |||
setInterval(function(){ | |||
const max = maxIndex(); | |||
if(index < max){ | |||
goToSlide(index + 1); | |||
}else{ | |||
goToSlide(0); | |||
} | |||
},3000); | |||
| خط ۶۴۴: | خط ۶۷۷: | ||
} | } | ||
/* | /* در حالت RTL */ | ||
if(difference > 0){ | if(difference > 0){ | ||
| خط ۷۰۶: | خط ۷۳۶: | ||
</html> | </html> | ||