چطور یک اسلایدر بی‌نهایت با اسکرول خودکار در المنتور بسازیم؟

اسلایدر بی‌نهایت – 👋 سلام به رفیق خلاق و آینده‌دار خودم حالت چطوره؟

تا حالا شده بخوای یه اسلایدر بسازی که خودش بدون توقف و کلیک، خیلی شیک و روون اسکرول کنه و توجه کاربر رو به خودش جلب کنه؟ یه اسلایدر جذاب که تصاویر، نمونه‌کارها یا هر محتوای بصری دیگه‌ای رو بی‌وقفه و بی‌دردسر نمایش بده؟ خب خوش اومدی! چون دقیقاً قراره همینو با هم امروز در این مقاله یاد بگیریم:

ساخت یه “اسلایدر بی‌نهایت” با اسکرول خودکار در المنتور

اونم فقط با المنتور، بدون کدنویسی عجیب و غریب، ولی با نتیجه‌ای حرفه‌ای و چشم‌نواز! ✨

چرا اصلا اسلایدر با اسکرول خودکار؟ 🤔

شاید بپرسی: “خب، اسلایدر معمولی چه مشکلی داره؟” راستش رو بخوای، اسلایدرهای معمولی بعد از چند تا عکس متوقف میشن و کاربر باید خودش دستی اونا رو ورق بزنه. اینجاست که اسلایدر بی‌نهایت وارد عمل میشه! این نوع اسلایدر بدون توقف و به صورت خودکار حرکت می‌کنه و یه تجربه کاربری فوق‌العاده رو به بازدیدکننده‌هات هدیه میده. فکر کن چقدر می‌تونی نمونه کارهات، یا حتی نظرات مشتری‌هات رو به صورت جذاب‌تری نمایش بدی! پس ارزشش رو داره که تا تهش بریم، نه؟ 😉

×

آموزش ایجاد روبان روی عکس در المنتور

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

ساخت اسلایدر بی‌نهایت با قابلیت اسکرول خودکار در المنتور

حالا که دلیل اهمیت این اسلایدر رو فهمیدی، وقتشه که آستین بالا بزنیم و شروع کنیم به ساختنش! نگران نباش، اصلا کار سختی نیست و المنتور مثل همیشه کار رو برامون راحت کرده.

قدم اول: آماده‌ سازی ویجت کاروسل تصاویر (مهم‌ترین ابزار ما 🛠️)

اولین کاری که باید بکنی، اینه که وارد محیط المنتور بشی و یه ویجت “کاروسل تصاویر” رو بکشی و بندازی تو صفحه. یادت نره که برای اینکه یه اسلایدر بی‌نهایت حرفه‌ای داشته باشی، باید عکس‌های جذابی رو انتخاب کنی. پس قبل از شروع، چند تا عکس با کیفیت و مرتبط با موضوع سایتت آماده داشته باش. (این تصاویر می‌تونن تصاویر نمونه‌کارهات، لوگوی سایت‌های همکار باشن یا هر محتوای بصری دیگه‌ای که می‌خوای به صورت بی‌نهایت نمایش داده بشه!)

همین که ویجت رو اضافه کردی، المنتور ازت می‌خواد که تصاویرت رو انتخاب کنی. به قسمت “انتخاب تصاویر” برو و عکس‌هات رو آپلود کن یا از گالری موجودت انتخاب کن. یادت باشه که هرچی عکس‌هات جذاب‌تر باشن، اسلایدرت هم دلرباتر میشه! 😍 (متناسب با طراحی و عرض صفحه، تعداد تصاویر رو در نظر بگیر؛ من برای این طراحی 3 تا تصویر رو در نظر گرفتم.)

×

آموزش ایجاد افکت نوسان لامپ در المنتور

مطالعه

قدم دوم: تنظیمات اسلایدر رو اینطوری انجام بده

حالا وقتشه که بریم سراغ تنظیمات ویجت “کاروسل تصاویر” و جادوی اسلایدر بی‌نهایت رو شروع کنیم! دقت کن که تنظیمات رو دقیقاً مثل چیزی که اینجا بهت میگم، انجام بدی:

1. نام کاروسل: می‌تونی یه اسم برای کاروسلت انتخاب کنی تا تو محیط المنتور راحت‌تر پیداش کنی. اگه نامش رو تغییر ندادی هم زیاد مهم نیس!
2. اندازه تصویر (رزولوشن تصویر): این قسمت خیلی مهمه! رزولوشن تصویر توی اسلایدر خیلی مهمه، چون اگه درست تنظیمش نکنی، ممکنه ظاهر کارت به هم بریزه. بهترین گزینه‌ای که میتونی انتخاب کنی “Medium Large – 768 x 0” هست. این یعنی عرض تصویر روی ۷۶۸ پیکسل تنظیم می‌شه و ارتفاعش به‌صورت خودکار بر اساس اون تنظیم می‌شه، پس دیگه لازم نیست نگران بهم‌ریختگی توی دستگاه‌های مختلف باشی. این گزینه باعث می‌شه عکس‌هات توی هر سایز صفحه‌نمایشی (موبایل، تبلت، دسکتاپ) تمیز و حرفه‌ای دیده بشن.
3. اسلایدها جهت نمایش: این گزینه رو روی “3” تنظیم کن. یعنی در هر لحظه 3 تا اسلاید در کنار هم نمایش داده بشن. این عدد رو می‌تونی با توجه به تعداد عکس‌هات و فضایی که داری تنظیم کنی.
4. اسلایدها جهت پیمایش: این گزینه رو روی “1” تنظیمش کن. یعنی هر بار که اسلایدر حرکت می‌کنه، یه اسلاید به سمت جلو میره. این تنظیم برای یه اسلایدر روان و بی‌نهایت عالیه.
5. ناوبری: این گزینه رو روی “هیچ” تنظیم کن. این یعنی دکمه‌های چپ و راست یا نقطه‌های زیر اسلایدر نمایش داده نمیشن. برای یه اسلایدر بی‌نهایت که خودش حرکت می‌کنه، این تنظیم عالیه چون نیازی به کنترل دستی نیست.
6. پیوند (لینک): این گزینه روی “فایل رسانه” تنظیم کنش. این یعنی وقتی روی عکس کلیک بشه، فایل اصلی عکس باز میشه. می‌تونی اینجا رو روی “آدرس دلخواه” هم تنظیم کنی و هر عکسی رو به یه صفحه خاص لینک بدی.
7. لایت باکس: این گزینه رو روی “بله” تنظیم کن. یعنی وقتی روی عکس کلیک بشه، عکس توی یه پنجره پاپ‌آپ زیبا باز میشه. این خیلی کاربرپسنده!

قدم سوم: تنظیمات پیشرفته تر اسلایدر بی‌نهایت

برای دسترسی به تنظیمات پیشرفته تر، لطفاً در همان تنظیمات ویجت کاروسل تصویر، به سمت پایین تب محتوا اسکرول کن در اونجا، بخشی تحت عنوان گزینه‌های اضافی رو مشاهده خواهی کرد. روی این بخش کلیک کن تا تنظیمات مربوطه برات نمایش داده بشه سپس، تنظیمات زیر رو اعمال کن:

1. بارگذاری تنبل (Lazy Load): این رو روی “بله” بذار. اینجوری عکس‌ها فقط وقتی لازم باشن بارگذاری میشن و سرعت سایتت رو بالا میبره.
2. پخش خودکار: خب، این گزینه خیلی مهمه! حتماً این رو روی “بله” بذار. این همون چیزیه که باعث میشه اسلایدرت خودش حرکت کنه.
3. توقف هنگام هاور (Hover):: این رو هم میتونی روی “بله” بذاری. اینجوری اگه کاربر ماوسش رو روی اسلایدر نگه داره، اسلایدر متوقف میشه تا بتونه عکس رو خوب ببینه. خیلی کاربرپسندتره!
4. سرعت پخش خودکار: این رو روی “0” تنظیم کن! بله، صفر! شاید عجیب به نظر برسه، ولی این عدد صفر در ترکیب با کد CSSی که جلوتر بهت میدم، باعث میشه اسلایدرت بدون مکث و با سرعت فوق‌العاده‌ای حرکت کنه و به اون حس اسلایدر بی‌نهایت برسی!
5. حلقه بی‌نهایت: وای، وای، وای! این همون دکمه جادوییه که اسلایدرت رو بی‌نهایت می‌کنه! حتماً این رو روی “بله” بذار. ♾️
6. سرعت انیمیشن: این رو روی “7000” تنظیم کن. این عدد بر حسب میلی‌ثانیه‌ست، یعنی 7 ثانیه. این سرعت حرکت اسلایدها رو تعیین می‌کنه. هرچی این عدد بیشتر باشه، اسلایدر کندتر حرکت می‌کنه و هرچی کمتر باشه، سریع‌تر. 7000 یه سرعت خوب و روانه، اما می‌تونی باهاش بازی کنی تا به سرعت دلخواهت برسی.
7. جهت‌یابی: این رو روی “چپ” تنظیم کن. این یعنی اسلایدر از راست به چپ حرکت می‌کنه.

همانطور که می‌بینید، تصاویر داخل اسلایدر از گوشه‌ها به هم چسبیدن!. برای اینکه فاصله مناسبی داشته باشن، لطفاً به تب استایل برو و در بخش فاصله‌گذاری، گزینه “سفارشی” رو انتخاب و مقدار اونو ۱۵ تنظیم کن.

قدم چهارم: افزودن کد CSS برای اسلایدر بی‌نهایت

حالا که همه تنظیمات رو انجام دادی، وقتشه یه تیکه کد CSS کوچولو به اسلایدرت اضافه کنیم تا حرکتش کاملاً روان و بدون مکث بشه. این کد باعث میشه انیمیشن حرکت اسلایدها به صورت خطی (Linear) باشه و اون حس بی‌نهایت بودن رو کامل کنه.

×

ایجاد پس‌ زمینه گرادیان متحرک تنها با المنتور و بدون نیاز به افزونه اضافی

مطالعه

برو به تب “پیشرفته” (Advanced) در تنظیمات ویجت “کاروسل تصاویر”. بعدش، “CSS سفارشی” (Custom CSS) رو پیدا کن. حالا کد زیر رو دقیقاً همینجوری که می‌بینی، کپی و اونجا پیست کن:

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

برای اینکه اسلایدرت فاصله مناسبی داشته باشه، بهتره در همون تب پیشرفته، فاصله خارجی یا مارجین رو از بالا و پایین 50 پیکسل در نظر بگیری.

تا اینجا اولین اسلایدر ما ایجاد شده. برای اینکه بخش مربوطه کمی متفاوت‌تر به نظر بیاد، یک اسلایدر دیگه هم به صفحه اضافه می‌کنم. برای صرفه‌جویی در زمان و جلوگیری از تنظیمات مجدد، همین اسلایدری که اضافه کردم رو تکثیر می‌کنم. فقط یه تغییر کوچک اعمال می‌کنیم: تصاویرش رو عوض می‌کنیم و در قسمت گزینه‌های اضافی در تب محتوا، جهت‌یابی رو بر خلاف اسلایدر اولی، روی “راست” تنظیم می‌کنیم. اینطوری اسلایدر از چپ به راست حرکت می‌کنه و در کنار اسلایدر بالایی، جلوه بصری بهتری ایجاد میشه.

×

ساخت ستون‌ شیک با گوشه های درخشان در المنتور

مطالعه

تبریک می‌گم! 🎉 اسلایدر حرفه ایت آماده‌ست!

حالا دیگه می‌تونی اسلایدری که ایجاد کردی رو ببینی! منتشرش کن و از دیدن نتیجه کارت لذت ببر. می‌بینی که چقدر روان و بدون توقف حرکت می‌کنه و بازدیدکننده‌هاتو مجذوب خودش می‌کنه. مطمئن باش با این قابلیت جذاب، سایتت کلی از رقباش جلو میفته و یه سر و گردن بالاتر وایمیسته! 😎

🚀 راهنمایی برای شخصی‌سازی بیشتر!

اگه می‌خوای اسلایدرت به صورت عمودی باشه ↕️ و جهت حرکتشون فرق کنه (یکی از بالا به پایین ⬇️ و اون یکی از پایین به بالا ⬆️)، کافیه بری به بخش پیشرفته هر کدوم از کاروسل‌های تصویرت. ⚙️

اونجا، تو قسمت تبدیل، برای یکی از اسلایدرها زاویه چرخش رو روی 90 درجه 🔄 و برای اون یکی -90 درجه ↩️ تنظیم کن.

×

هیروسکشن بارش کد: طراحی شده با المنتور

مطالعه

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

📽️ویدیوی آموزش کامل ساخت اسلایدر بی نهایت و بدون توقف

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

×

ساخت هاور افکت ترسیم خطوط حاشیه دکمه یا باکس در المنتور

مطالعه