بهترین آموزش های CSS و جاوا اسکریپت چرخ فلک در Tuts+

به ساختن چرخ و فلک علاقه دارید اما نمی دانید از کجا شروع کنید؟ شما در مکان عالی هستید. امروز بهترین آموزش های CSS و جاوا اسکریپت چرخ فلک را که در دسترس هستند را بررسی خواهیم کرد Envato Tuts+.

چرخ فلک در یک وب سایت برای چه استفاده می شود؟

چرخ فلک‌ها اغلب در صفحات اول وب‌سایت‌ها یافت می‌شوند، جایی که اهداف مختلفی از بهبود زیبایی‌شناختی گرفته تا ارائه محتوای کاربردی را شامل می‌شوند.

در اینجا چند راه وجود دارد که می توانید آنها را در حال استفاده پیدا کنید:

1. برای برجسته کردن محتوای کلیدی: چرخ فلک ها برای جلب توجه به موارد یا ویژگی های خاص بسیار عالی هستند. به عنوان مثال، یک سایت تجارت الکترونیک ممکن است از یک چرخ فلک برای برجسته کردن محصولات پرفروش، معاملات ویژه یا محصولات جدید استفاده کند.

2. برای بهینه سازی فضا: آنها راه حلی برای چالش فضای محدود ارائه می دهند. با چرخاندن محتوا، چرخ و فلک ها به شما امکان می دهند اطلاعات بیشتری را در یک منطقه فشرده ارائه دهید و از نیاز به پیمایش بیش از حد کاربران جلوگیری می کند.

3. برای افزایش تعامل کاربر: ماهیت پویای چرخ فلک ها می تواند وب سایت را تعاملی تر و از نظر بصری جذاب تر کند. این تعامل می تواند تعامل کاربر را افزایش دهد و بازدیدکنندگان را تشویق کند تا زمان بیشتری را در سایت بگذرانند.

4. برای داستان سرایی و محتوای متوالی: از چرخ فلک ها همچنین می توان برای گفتن یک داستان یا ارائه اطلاعات متوالی، مانند راهنمای گام به گام یا مجموعه ای از مقالات مرتبط، به شیوه ای سازمان یافته و از نظر بصری جذاب استفاده کرد.

اکنون بیایید به جمع بندی برخی از آموزش های مورد علاقه چرخ فلک CSS JS که در Envato Tuts+ موجود است برسیم.

10 آموزش CSS و جاوا اسکریپت چرخ فلک

از آموزش هایی که نحوه استفاده از مولفه چرخ و فلک بوت استرپ را توضیح می دهند، تا کتابخانه های مختلف چرخ و فلک جاوا اسکریپت و نمایش اسلاید گرفته تا دستورالعمل هایی در مورد نحوه کدنویسی چیزها از ابتدا، همه آن ها را در Tuts+ داریم! بیایید چند آموزش با عملکرد برتر و آسان برای ایجاد یک چرخ فلک در CSS را بررسی کنیم:

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. چگونه با Swiper.js یک اسلایدر عکس پاسخگو بسازیم (آموزش تصویری)

Swiper.js بیشتر برای شما، زیرا اینطور است که خوب Adi Purdila را در حالی که نحوه ساخت چند چرخ فلک Swiper مختلف را در این آموزش ویدیویی نشان می دهد، تماشا کنید. فراموش نکنید که در کانال YouTube Tuts+ مشترک شوید برای بسیاری دیگر از این قبیل!

8. گالری سبد بوت استرپ پاسخگو

ممکن است با آن آشنا باشید بوت استرپ، محبوب ترین چارچوب توسعه front-end. در این تمرین، با ساختن یک گالری لایت باکس، عملکرد آن را گسترش می دهیم.

در واقع، ما چیز جدیدی نمی سازیم. ما فقط در حال سفارشی سازی و ترکیب اجزای موجود Bootstrap هستیم.

این آموزش یک گزینه چرخ فلک جامد HTML CSS است.

9. گالری سبد UIkit پاسخگو

UIkit یکی دیگر از فریم ورک های مدولار front-end است و اخیراً آموزش های مختلفی در مورد ویژگی های آن منتشر کرده ایم! در این آموزش ما گسترش می دهیم آن جعبه نور جزء با اضافه کردن پیمایش نقطه.

10. گالری تصویر قابل کشیدن و یک لایت باکس سفارشی با GSAP

GSAP یک کتابخانه محبوب انیمیشن جاوا اسکریپت است. به لطف آن قابل کشیدن افزونه، ما قادر به پیاده سازی یک گالری تصویر قابل کشیدن هستیم که از یک گالری سبد پاسخگو پشتیبانی می کند. بنابراین، اگر دنبال یک چرخ فلک متحرک هستید، این آموزش ممکن است با نیازهای شما مطابقت داشته باشد.

چرخ فلک های وردپرس CodeCanyon و Envato Elements

همه چیز اینجا متوقف نمی شود! اگر برای سایت وردپرسی خود به چرخ فلک نیاز دارید، CodeCanyon و عناصر Envato صدها مورد از آنها را برای انتخاب فراهم کنید.

21 بهترین پلاگین اسلایدر و چرخ فلک وردپرس در سال 2024

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

16 بهترین افزونه گالری وردپرس برای سال 2024

در این پست، بهترین افزونه‌های ممتاز گالری وردپرس موجود در CodeCanyon را بررسی می‌کنیم و همچنین پنج مورد از بهترین افزونه‌های رایگان را فهرست می‌کنیم. لیست بر اساس نوع گالری تفکیک شده است: افزونه هایی برای ویدئو و چند رسانه ای، تصاویر و شبکه های وردپرس وجود دارد.

نتیجه

امیدواریم این لیست از آموزش‌های لغزنده چرخ فلک CSS به شما الهام کافی برای ساختن چرخ فلک‌های خود را داده باشد. از دموها لذت ببرید، آموزش های مرتبط را بخوانید و در آخر مطمئن باشید Envato Tuts+ را در CodePen دنبال کنید برای قلم های خلاقانه تر!