به ساختن چرخ و فلک علاقه دارید اما نمی دانید از کجا شروع کنید؟ شما در مکان عالی هستید. امروز بهترین آموزش های CSS و جاوا اسکریپت چرخ فلک را که در دسترس هستند را بررسی خواهیم کرد Envato Tuts+.
9 آموزش CSS و جاوا اسکریپت چرخ فلک
از آموزش‌هایی که توضیح می‌دهند چگونه از مؤلفه چرخ و فلک Bootstrap، کتابخانه‌های مختلف جاوا اسکریپت و گردونه‌های نمایش اسلاید، و نحوه کدنویسی چیزها را از ابتدا توضیح می‌دهند، همه آنها را در Tuts+ داریم!
1. نمایش اسلاید CSS خالص
آیا می دانستید که می توانید یک نمایش اسلاید فقط CSS بسازید؟
دمو زیر نحوه دستیابی به آن را با استفاده از تکنیک هک چک باکس CSS نشان می دهد. کاملاً کاربردی است و از پیمایش پیکان، پیمایش نقطه‌ای، ناوبری تصاویر کوچک و پیمایش صفحه کلید پشتیبانی می‌کند.
2. چرخ فلک جاوا اسکریپت وانیلی (14 خط کد!)
در این تمرین، مربی جمیما ابو، راه بسیار سریعی را برای ساختن یک چرخ فلک جاوا اسکریپت قابل پیمایش تنها با چند خط کد انجام می دهد.
3. نمایش اسلاید تمام صفحه جاوا اسکریپت Vanilla
این تمرین نحوه ایجاد یک نمایش اسلاید تمام صفحه جاوا اسکریپت را توضیح می دهد که هر بار که ماوس را روی نمایش اسلاید می رویم مکان نما پیش فرض به یک پیکان ناوبری تبدیل می شود.
بسته به موقعیت مکان نما، فلش بعدی یا قبلی نمایش داده می شود. با کلیک بر روی آن، اسلاید بعدی یا قبلی نمایان می شود.
این چرخ فلک از چند گزینه سفارشی سازی پشتیبانی می کند پخش خودکار حالت
4. اسلایدر پاسخگو با Owl.js
این آموزش نحوه استفاده را به شما آموزش می دهد Owl.js (یک کتابخانه جاوا اسکریپت بسیار محبوب) برای ساخت یک نوار لغزنده تمام صفحه.
کمی جلوتر برویم، همچنین نشان می‌دهد که چگونه می‌توان عناصر متنی هر اسلاید فعال را به صورت متوالی با استفاده از چند رویداد چرخ و فلک متحرک کرد.
به عنوان یک امتیاز، نحوه تطبیق موقعیت نقاط بر اساس ارتفاع محتویات اسلاید فعال را نیز پوشش می دهد.
این کتابخانه دیگر نگهداری نمی شود، بنابراین با احتیاط از آن استفاده کنید.
5. گالری عکس پاسخگو با slick.js
در این تمرین، ما از slick.js، یکی دیگر از چرخ فلک های محبوب جاوا اسکریپت، برای توسعه یک گالری تصاویر.
در حالت دسکتاپ، در سمت چپ، تصاویر کوچک وجود دارد، در حالی که در سمت راست اسلاید برجسته/فعال قرار دارد. در حالت موبایل، تصاویر بند انگشتی در زیر تصویر برجسته ظاهر می شوند.
برای ایجاد این جلوه، ما دو چرخ فلک مستقل را تنظیم کرده و آنها را به لطف ویژگی همگام سازی Slick همگام می کنیم.
6. لغزنده پاسخگو با Swiper.js
Swiper.js یکی دیگر از گزینه های شناخته شده برای ساخت چرخ فلک های پیچیده جاوا اسکریپت است. در این تمرین، ما یک نوار لغزنده swiper.js را به عنوان بخشی از یک طرح نامتقارن اضافه می کنیم.
7. گالری سبد بوت استرپ پاسخگو
ممکن است با آن آشنا باشید بوت استرپ، محبوب ترین چارچوب توسعه front-end. در این تمرین، با ساختن یک گالری لایت باکس، عملکرد آن را گسترش می دهیم.
در واقع، ما چیز جدیدی نمی سازیم. ما فقط در حال سفارشی سازی و ترکیب اجزای موجود Bootstrap هستیم.
8. گالری سبد UIkit پاسخگو
UIkit یکی دیگر از فریم ورک های مدولار front-end است و اخیراً آموزش های مختلفی در مورد ویژگی های آن منتشر کرده ایم! در این آموزش ما گسترش می دهیم آن جعبه نور جزء با اضافه کردن پیمایش نقطه.
9. گالری تصویر قابل کشیدن و یک لایت باکس سفارشی با GSAP
GSAP یک کتابخانه محبوب انیمیشن جاوا اسکریپت است. به لطف آن قابل کشیدن افزونه، ما قادر به پیاده سازی یک گالری تصویر قابل کشیدن هستیم که از یک گالری سبد پاسخگو پشتیبانی می کند.
چرخ فلک های وردپرس CodeCanyon و Envato Elements
همه چیز اینجا متوقف نمی شود! اگر برای سایت وردپرسی خود به چرخ فلک نیاز دارید، CodeCanyon و عناصر Envato صدها مورد از آنها را برای انتخاب فراهم کنید.
21 بهترین پلاگین اسلایدر و چرخ فلک وردپرس در سال 2022
چه بخواهید نظرات مشتریان، آخرین پست های وبلاگ خود، بهترین تصاویر خود یا سایر رسانه ها را در وب سایت خود به نمایش بگذارید، افزونه اسلایدر وردپرس یا پلاگین کشویی چرخ فلک وردپرس خارج وجود دارد که برای شما مناسب است.
21 بهترین افزونه گالری وردپرس برای سال 2022
در این پست، بهترین افزونه‌های ممتاز گالری وردپرس موجود در CodeCanyon را بررسی می‌کنیم و همچنین پنج مورد از بهترین افزونه‌های رایگان را فهرست می‌کنیم. لیست بر اساس نوع گالری تفکیک شده است: افزونه هایی برای ویدئو و چند رسانه ای، تصاویر و شبکه های وردپرس وجود دارد.
نتیجه
امیدواریم این لیست به شما الهام کافی برای ساختن چرخ فلک های خود را داده باشد. از دموها لذت ببرید، آموزش های مرتبط را بخوانید و در آخر مطمئن باشید Envato Tuts+ را در CodePen دنبال کنید برای قلم های خلاقانه تر!
