چطور سرعت کاروسل المنتور را برای دسکتاپ و موبایل جدا تنظیم کنیم (قدم‌به‌قدم + کد آماده)
اگر از المنتور برای نمایش تصاویر سایتتان استفاده میکنید، ممکن است بخواهید سرعت حرکت خودکار (autoplay) کاروسل را در دستگاه‌های مختلف متفاوت تنظیم کنید — مثلاً دسکتاپ سریع‌تر و موبایل کندتر. در این مطلب یک راه‌حل عملی، تست‌شده و ساده با کد آماده قرار داده‌ایم که روی Elementor Pro و اکثر قالب‌های وردپرس کار می‌کند.
چرا باید سرعت را جدا تنظیم کنیم؟
تجربه کاربری موبایل با دسکتاپ متفاوت است — در موبایل کاربران نیاز به زمان بیشتری برای دیدن محتوا دارند.
کاهش سرعت در موبایل باعث می‌شود تصاویر فرصت بیشتری برای دیده‌شدن داشته باشند و نرخ bounce کاهش یابد.
با تنظیم جداگانه می‌توانید روی KPIهای صفحه (Time on Page, CTR) اثر مثبت بگذارید.
پیش‌نیازها :
المنتور نصب شده (ترجیحاً Elementor Pro برای دسترسی ساده‌تر به Custom Code).
ویجت Image Carousel یا Media Carousel در صفحه.
آشنایی مختصر با ورود به مسیر افزودن Custom Code
جهت بهبود کیفیت سایت خود پیشنهاد مطالعه مطالب زیر را داریم :
افزونه Antispam Bee راهکاری سبک، قدرتمند و رایگان برای مقابله با اسپم وردپرس
معرفی افزونه Show Pages ID در وردپرس مشاهده سریع ID برگه‌ها و نوشته‌ها
افزونه Disable Admin Notices Individually خداحافظی با اعلان‌های مزاحم در پیشخوان وردپرس
تنظیمات اولیه در المنتور
ویجتی که کاروسل را شامل می‌شود باز کنید (Image Carousel یا Media Carousel).به تب Advanced → CSS ID رفته و یک شناسه اختصاصی قرار دهید
مثلا:mycarousel (این شناسه را بعداً در کد JS استفاده می‌کنیم.)
وارد بخش نمایش > ویرایشگر > footer.php شوید و کد زیر را در جای مناسب کپی کنید
<script>
document.addEventListener('DOMContentLoaded', function() { function updateSwiperSpeed() { const swiperContainer = document.querySelector('#mycarousel .swiper'); if (!swiperContainer) return;
const checkSwiper = setInterval(() => { if (swiperContainer.swiper) { clearInterval(checkSwiper); const swiper = swiperContainer.swiper;
const delay = window.innerWidth <= 767 ? 20000 : 3000;
swiper.params.autoplay.delay = delay;
swiper.autoplay.stop(); swiper.autoplay.start(); } }, ۳۰۰); }
updateSwiperSpeed();
window.addEventListener('resize', updateSwiperSpeed);});
</script>
نکته: در کد بالا ۶۰۰۰ میلی‌ثانیه برای موبایل (۶ ثانیه) و ۳۰۰۰ میلی‌ثانیه برای دسکتاپ (۳ ثانیه) تنظیم شده — می‌توانید این اعداد را با توجه به نیازتان تغییر دهید.
نکته : توجه داشته باشید اگر از افزونه ی کش استفاده میکنید حتما کش را پاک کنید
نکته : اگر سایت از lazy load تصویر یا بهینه‌سازی تصویر (مانند افزونه‌های بهینه‌ساز) استفاده می‌کند، اطمینان حاصل کن که تصاویر کامل لود شوند تا Swiper به درستی شناسه تصاویر را بخواند.
نکته : اگر دو یا چند کاروسل با شناسه یکسان داری، بهتر است شناسه‌ها را یکتا کنی و برای هر کدام یک تنظیم جدا اعمال کنی.
س: آیا این روش روی المنتور رایگان هم کار می‌کند؟
پاسخ: بله، اما برای افزودن Custom Code بهتر است از افزونه‌هایی مثل Simple Custom CSS & JS یا Code Snippets استفاده کنید. نسخه پرو کار را راحت‌تر می‌کند.
س: چگونه می‌توانم زمان‌های دیگر (مثلاً دسکتاپ ۲s و موبایل ۸s) را تنظیم کنم؟
پاسخ: فقط اعداد ۳۰۰۰ و ۶۰۰۰ را در کد JS به میلی‌ثانیه مورد نظر تغییر بده (۲۰۰۰ برای ۲ ثانیه، ۸۰۰۰ برای ۸ ثانیه و …).
س: آیا این تنظیم روی SEO تأثیر دارد؟
پاسخ: مستقیم خیر؛ اما بهبود UX (مثلاً نمایش زمان کافی برای مشاهده محتوا در موبایل) می‌تواند نرخ تعامل را افزایش دهد که به‌صورت غیرمستقیم برای سئو مفید است
