ساخت اسلایدشو ریسپانسیو با CSS3 و jQuery

ساخت اسلایدشو ریسپانسیو با CSS3 و jQuery

امروز ما یاد خواهیم گرفت که چگونه یک اسلایدشو ریسپانسیو با استفاده از پلاگین FlexSlider و CSS3 ایجاد کنیم. امیدوارم که از این مطلب لذت ببرید و برای پروژه بعدی خود مفید باشد. اجازه دهید شروع کنیــم!

 

نمایش [fa type=”eye”]  دانلود [fa type=”download”]


 

مرحله اول – HTML

اچ تی ام ال های سلایدر (slider) ما بسیار راحتی می باشد. ابتدا یک تگ <div> با کلاس flex-container درست می کنیم، آنگاه درون این تگ یک <div> دیگر را با کلاس flex-slider ایجاد می کنیم، درود این <div> تمام کنترل های اسلایدر قرار خواهد گرفت. در پایان هم یک لیست نامرتب (unordered) برای اضافه کردن اسلایدر قرار می دهیم. هر اسلایدری نیاز به یک تگ <li> دارد.

حال باید کتابخانه jQuery و پلاگین FlexSlider را اضافه کنیم، برای بارگذاری اسلایدر کدهای زیر را باید اضافه کنیم، البته تنظیمات بسیاری هم این پلاگین دارد که می توانید سایت FlesSlider را مشاهده کنید. توجه کنید که jQuery و FlexSlider را دانلود و در پوشه js قرار داده باشید. کدها زیر را قبل از اینکه تگ <body> بسته شود قرار دهید:

 

مرحله دوم – CSS

ابتدا ما باید مقداری css اضافه کنیم تا مقدارهای پیشفرض padding, margin را پاک کنیم، تا در همه ی مرورگرها به طور یکنواخت دیده شود.  ابتدا یک فایل css با نام style.css ایجاد کنید و در قسمت <head> قرار دهید، توجه کنید که فایل style.css در پوشه css قرار گیرد. خط زیر را درست بعد از تگ <title> قرار دهید:

حال باید اسلایدها را مخفی کنیم تا در هنگام بارگذاری صفحه عکس ها پرش نکنند. مقداری css باید به عکس ها اضافه کنیم، به صورت زیر:

برای به پایان رساندن این مرحله مقداری css برای برای حذف شناور (float) بودن اسلایدر لازم است:

 

مرحله سوم – flex-container

برای تگ flex-container ما پس زمینه سفید انتخاب کرده ایم، و هم چنین مقداری سایه با اسفاده از مشخصه box-shadow در CSS3. و اضافه کردن ۱۰ پیکسل به padding و گرد کردن گوشه ها:

من حداقل و حداکثر عرض را برای اسلایدر ما تنظیم کرده ام. شما می توانید آن را در پروژه های بعدی تغییر دهید. همچنین به مشخصه zoom مقدار ۱ را داده ایم تا در مرورگرهای موبایل، اسلایدر ما به صور خودکار تغییر اندازه دهد.

 

مرحله چهارم – فلش بعدی و قبلی

برای فلش های بعدی و قبلی، ما از gradient در CSS3 استفاده می کنیم، طول و عرض را تعیین می کنیم. برای قرار دادن دکمه ها به صورت عمودی، نیاز داریم که مکان آنها را از بالا %۵۰ قرار دهیم:

فلش ها را با استفاده از before:اضافه می کنیم، این ویژگی، این امکان را به ما می دهد که بدون اضافه کردن تگ جدید، مقداری را اضافه کنیم. برای ایجاد این روبان ما از یک ترفند ساده در CSS3 استفاده می کنیم، این شکل، با استفاده از after: گنجانده می شود:

حال گوشه های دکمه ها را گرد می کنیم، و در چپ و راست قرار می دهیم:

 

مرحله پنجم – کنترل اسلایدر

کنترل اسلایدر، دکمه های گردی در زیر اسلایدر هستند که به ما اجازه می دهند تا عکس ها را مرور کنیم. ما این دکمه ها را در زیر اسلایدر قرار می دهیم. و آنها را با استفاده از border-radius و box-shaodow گرد و دارای سایه می کنیم. برای اینکه بدانیم کدام اسلاید فعال است، مقدار box-shadow را پاک و مقداری gradient اضافه می کنیم:

 

مرحله ششم – برچسب ها

ما تقریبا کار را تمام کردیم، اجازه دهید مقداری CSS به برچسب ها اضافه کنیم. پس زمینه را سیاه می کنیم و کمی هم شفافیت با رنگ های rgba می دهیم. و آنگاه در پایین اسلاید قرار می دهیم.

 

نتیجه گیری

این پایان این آموزش است. امیدوارم که این مقاله مفید بوده باشد و چیز جدید یاد گرفته باشید. می توانید با تغییرات دلخواه این اسلایدر در پروژه بعدی خود استفاده کنید (: