GitHub: https://github.com/yifaneye/react-gallery-carousel
نسخه ی نمایشی: https://yifaneye.github.io/react-gallery-carousel/ (یا https://yifanai.com/rgc)
زمینه
من دارم بسیاری از اجزای چرخ فلک/لغزنده را مورد استفاده قرار داده و به دقت تجزیه و تحلیل کرد. من آن را خلاصه کردم مسائل آنها هستند:
- برخی از آنها اسلاید را حرکت نمی دهند، زیرا کاربر روی اسلاید می کشد.
- اکثر آنها از کشیدن ماوس برای انتقال به اسلاید قبلی یا بعدی پشتیبانی نمی کنند. با مواردی که از شبیه‌سازی ماوس پشتیبانی می‌کنند، برخی از آنها به درستی با حالتی که ماوس از چرخ فلک خارج می‌شود، برخورد نمی‌کنند، که به کاربر اجازه می‌دهد تا به طور مداوم چرخ فلک را کنترل کند.
- اکثر آنها از ناوبری صفحه کلید (به عنوان مثال کلید چپ، راست و تب) پشتیبانی نمی کنند.
- بسیاری از آنها را نمی توان به تمام صفحه / مدال / لایت باکس به حداکثر رساند. در حالت تمام صفحه، مشکل سازگاری مرورگر وجود دارد، یعنی iOS Safari در آیفون از API تمام صفحه پشتیبانی نمی کند.
- اکثر آنها راه حل آسانی برای ساختن ریز عکسها ندارند. با مواردی که دارای ریز عکسها هستند، بسیاری از ریز عکسها را نمی توان آزادانه پیمایش کرد که منجر به تجربه کاربری ضعیف می شود. علاوه بر این، بسیاری از ریز عکسها را نمی توان با تنبلی بارگذاری کرد.
- بسیاری از آنها نمی توانند تصاویر را بارگذاری کنند (و از قبل بارگذاری کنند). با مواردی که می توانند بارگذاری تنبلی داشته باشند، اکثر آنها دارای انتقالی هستند که وقتی کاربر به یک اسلاید دور می رود، تصاویر میانی را طی می کند که هدف از بارگذاری تنبل را شکست می دهد.
- برخی از آنها نمی توانند به صورت خودکار پخش شوند. با آنهایی که می توانند به طور خودکار پخش شوند، نمی توانند به طور خودکار مکث کنند. به عنوان مثال، هنگامی که کاربر به برگه دیگری ضربه می زند یا به برنامه دیگری می رود، پخش خودکار در آن چرخ فلک ها متوقف نمی شود.
- اکثر آنها به تنظیمات حرکت کاهش یافته توسط کاربر احترام نمی گذارند.
- اکثر آنها سرعت کشیدن انگشت را نادیده می گیرند و فقط یک مدت زمان انتقال ثابت را تعیین می کنند.
- برخی از چرخ فلک های آنها در اندازه های مختلف خواهند بود، زمانی که تصاویر/اسلایدهای داخل در اندازه های مختلف باشند. وقتی تصاویر/اسلایدهایشان در اندازه‌های مختلف باشد، برخی از انتقال‌های آنها ناهموار است.
- اکثر آنها از عناصر سفارشی در یک اسلاید پشتیبانی نمی کنند.
- بسیاری از آنها را نمی توان برای نمایش در راست به چپ (RTL) تنظیم کرد.
- برخی از آنها برای بزرگنمایی، نیشگون گرفتن را غیرفعال می کنند، در حالی که برخی دیگر هنگام نیشگون گرفتن با 2 انگشت دچار مشکل می شوند. علاوه بر این، هنگامی که پنجره بزرگنمایی می‌شود، بیشتر آنها هنوز برای رفتن به اسلاید قبلی یا بعدی، کشیدن لمسی را تشخیص می‌دهند، در حالی که قصد اکثر کاربران در این سناریو این است که قسمت‌های دیگر اسلاید فعلی را ببینند.
- برخی از آنها باعث می‌شوند اسلایدها موقعیت خود را در تغییر اندازه پنجره یا تغییر جهت دستگاه تلفن همراه، تا زمان تعامل کاربر دیگری، حفظ کنند.
- برخی از آنها فقط می توانند تصاویر از پیش تعیین شده داشته باشند (یعنی قبل از سوار شدن مؤلفه چرخ فلک).
- اکثر آنها راه حلی برای تصویر بازگشتی (برای زمانی که یک تصویر در دسترس نیست) ارائه نمی دهند.
- برخی از آنها با دو بار ضربه زدن کاربر روی کنترل بزرگنمایی می شوند، در حالی که قصد اکثر کاربران در این سناریو این است که به سرعت بعد از اسلاید بعدی به اسلاید بعدی بروند.
- برخی از آنها دکمه چپ یا راست را حذف می کنند تا نشان دهند که دیگر اسلاید در آن جهت وجود ندارد. با این حال، کاربر احتمالاً روی نقطه‌ای کلیک می‌کند که قبلاً دکمه قرار داشت، که باعث رفتارهای نامطلوب می‌شود، به عنوان مثال کلیک کردن روی پیوند یا دکمه‌ای که در آن نقطه نیز وجود دارد.
- برخی از آنها از روش شبیه سازی اسلاید اول و آخرین اسلاید برای رسیدن به حلقه (یا حالت بی نهایت) استفاده می کنند. من فکر می کنم آن روش از نظر معنایی عالی نیست.
- برخی از آنها نمی‌توانند کش رفتن عمودی را از کشیدن افقی تشخیص دهند، به طوری که یک سوایپ نه دقیقاً عمودی، اسلایدها را کمی به سمت افقی حرکت می‌دهد. و یک سوایپ نه دقیقاً افقی صفحه (سند) را کمی به صورت عمودی حرکت می دهد.
⬇️
میخواستم خودم بنویسم جزئیات محور و نفیس جزء چرخ فلک که استفاده از آن آسان است و در عین حال همه موارد فوق را در زیر کاپوت حل می کند/پشتیبانی می کند. 🤓
من میخواستم درک خود را از رویدادهای جاوا اسکریپت، دستکاری DOM، APIهای مرورگر، سازگاری بین مرورگرها و اشکال‌زدایی عملکرد به سطح بعدی ارتقا دهم. 🤓
من میخواستم به اجزای عملکردی React، هوک‌ها، قلاب‌های سفارشی و آشتی‌سازی مسلط باشم. 🤓
من می خواستم بیشتر یاد بگیرم، مراقبت و توجه بیشتری به دسترسی داشته باشم. من می‌خواهم خطوط اصلی تمرکز را به کاربران مناسب ارائه دهم، از پیمایش صفحه‌کلید پشتیبانی کنم، از صفحه‌خوان پشتیبانی کنم، و آموزش‌های چرخ فلک قابل دسترس W3C را دنبال کنم.
⬇️
چرخ فلک من باید از موارد زیر پشتیبانی کند: لمس، شبیه‌سازی ماوس، پیمایش صفحه‌کلید، مدال (لایت‌باکس)، تصاویر کوچک، پخش خودکار (و مکث خودکار)، RTL (از راست به چپ برای بین‌المللی‌سازی)، بارگیری تنبل تصویر (و بارگذاری اولیه)، تصاویر پاسخگو، تصویر بازگشتی، تنظیمات حرکت کاهش یافته، تشخیص سرعت آنی، طراحی پاسخگو، تصاویر با هر اندازه، عناصر سفارشی در یک اسلاید، نزدیک کردن به زوم، سفارشی سازی و دسترسی عالی. 😎
(به عنوان مثال برای حل آخرین مشکل (#20) در لیست بالا، چرخ فلک من باید بتواند یک کش رفتن عمودی را تشخیص دهد و سپس اسلایدها را به صورت افقی در چرخ فلک ثابت کند. ✅
همچنین باید بتواند کش رفتن عمدتاً افقی را تشخیص دهد و سپس چرخ فلک را به صورت عمودی در صفحه ثابت کند. ✅)
نسخه ی نمایشی
نسخه ی نمایشی: https://yifaneye.github.io/react-gallery-carousel/ (یا https://yifanai.com/rgc)
GitHub: https://github.com/yifaneye/react-gallery-carousel
نسخه ی نمایشی: https://yifaneye.github.io/react-gallery-carousel/ (یا https://yifanai.com/rgc)
npm: https://www.npmjs.com/package/react-gallery-carousel
من با دقت آیکون ها را دست ساز کردم، قلاب های سفارشی مفید زیادی نوشتم و بسیاری از اجزای کاربردی نفیس را برای تکمیل این کار نوشتم. 👨🏻💻
همه می توانند بیایند و سؤال بپرسند، مسائل را پیدا کنند و گزارش دهند، درخواست ها و پیشنهادات خود را ارائه دهند! 😊
GitHub: https://github.com/yifaneye/react-gallery-carousel
نسخه ی نمایشی: https://yifaneye.github.io/react-gallery-carousel/ (یا https://yifanai.com/rgc)
برای حمایت از من یک قهوه بخر: https://www.buymeacoffee.com/yifanai
