ساخت اسلایدر با SwiperJs

هدف این جلسه معرفی ابزاری برای ساخت #اسلایدر (#slider) توی فرانت اند هست. همون طور که از قبل دیدین، ما برای درست کردن یک صفحه، میتونیم کد هارو از بیس خودمون بزنیم یا خیلی جاها از ابزارهای آماده ( مثل بوتسرپ ) استفاده کنیم. توی این جلسه هم یک ابزار دیگه بهتون معرفی میشه تا باهاش بتونین اسلایدر های متنوع بسازین.

معرفی اجمالی Swiper

Swiper یک کتابخانه جاوااسکریپت (JavaScript) است که برای ایجاد اسلایدرها (سلایدشوها) در وب سایت‌ها و برنامه‌های وب استفاده می‌شود. این کتابخانه امکانات زیادی برای سفارشی‌سازی اسلایدرها و افکت‌های مختلف را فراهم می‌کند.

ویژگی‌های اصلی Swiper شامل:

پاسخگویی به دستگاه‌ها (Responsive): این کتابخانه به خوبی با اندازه صفحه نمایش مختلف سازگار است و به طور خودکار تنظیمات خود را برای محیط‌های مختلف انجام می‌دهد.
پشتیبانی از لمس (Touch Support): Swiper به دستگاه‌های لمسی و موبایلی پشتیبانی دارد تا تجربه کاربری بهتری را در این دستگاه‌ها فراهم کند.
افکت‌های انتقال (Transition Effects): این کتابخانه انواع افکت‌های انتقال بین اسلایدها را ارائه می‌دهد که شامل اسلاید، فید، کاورفلو، کاوررول، و ... می‌شوند.
سفارشی‌سازی قابلیت‌ها (Customizable): Swiper امکان سفارشی‌سازی بسیار زیادی برای ظاهر و عملکرد اسلایدرها فراهم کرده است، از جمله تنظیمات مربوط به نمایش نویگیشن، پیشرفت، اسلاید‌های قابل نمایش، و ...
پشتیبانی از مداول (Module Support): Swiper به عنوان یک ماژول جاوااسکریپت قابل استفاده است و به سادگی با بسته‌بندی مداول‌های مختلف همراه است.

برای استفاده از Swiper، شما می‌توانید کتابخانه را از سایت رسمی آن دانلود کنید و به وب سایت خود اضافه کنید. سپس، با استفاده از API و تنظیمات موجود، اسلایدرهای خود را سفارشی کنید.

سایت swiperjs.com

توی این قسمت با VSCode آشنا میشیم و یک پکیج کاربردی رو معرفی میکنیم که بدون اون واقعا کد زدن سخته. در ادامه اولین صفحه HTML رو میسازیم و توش به معر ...

این قسمت، ادامه بحث در باره HTML هست. با تگ های بیشتری آشنا میشیم، همچنین کاربرد اتربیوت ها رو توی تگ ها یاد میگیریم. آدرس دهی نسبی رو میبینیم چجوریه ...

توی این قسمت در ابتدا، جلسه های قبل رو دوره میکنیم. در ادامه میگیم CSS چیه و چیکار میخواد واسمون بکنه. اولین CSS رو میزنیم و با اولین Selector آشنا می ...

در ادامه جلسه قبل ( آشنایی با CSS )، توی این جلسه به بحث بیشتر در باره سلکتورهایی مثل ID و CLASS می پردازیم. همچنین بیشتر در باره اولویت ها صحبت میکنی ...

توی این جلسه به چند Property و Value های مربوطه برای CSS می پردازیم. مثل position display border font-size و ... و البته بحث بیشتر ...

توی این قسمت، بیشتر با CSS کار میکنیم و با Property و Value های بیشتری آشنا میشیم مثل: transform background-image background-size backgro ...

توی این جلسه، به معرفی JQery می پردازیم. در واقع JQuery یک کتابخانه هست که با JavaScript نوشته شده. JQuery بهمون امکان کنترل Event های توی صفحه رو ...

توی این جلسه، به معرفی Bootstrap می پردازیم. Bootsrap یک Framework برای Front-End کارهاست تا همه چیرو خیلی سریعتر شروع کنن و نیاز به کنترل موارد کمتری ...

توی این جلسه میریم ببینیم تا الان چی کردم. پس یه سر میزنیم به Bootstrap و در ادامه به Sass میپردازیم. Sass رو روی VScode میاریم تا بتونیم راحتتر CS ...

هدف این جلسه معرفی ابزاری برای ساخت #اسلایدر (#slider) توی فرانت اند هست. همون طور که از قبل دیدین، ما برای درست کردن یک صفحه، میتونیم کد هارو از ...

توی این جلسه میخوایم با استفاده از چیزهایی که بلدیم چنتا اسلایدر بسازیم. برای همین نیاز به یک نمونه داریم. میریم از DIGIKALA نگاه میکنیم و ایده میگیری ...