وب دیزاینر

ارائه دهنده خدمات تحت وب

WebDesigner
الآن اینجا هستید:
صفحه اصلی » بانک کد » جی کوئری » آموزش ساخت اسلایدر سبک و راحت با جی کوئری

تبلیغات

آموزش ساخت اسلایدر سبک و راحت با جی کوئری

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

استفاده از این کد بسیار ساده است فقط کافی است قدم به قدم با این آموزش پیش برید تا اسلایدر شخصی خودتون رو بسازید.

ابتدا سراغ کد HTML اسلایدر می رویم: (دقت داشته کدهای زیر هرجا قرار بدید اسلایدر در همان مکان نمایش داده میشه)

در کد بالا در فیلد src آدرس صحیح تصویر خود را قرار دهید. توجه کنید که div ای که کلاس current دارد در ابتدای اسلایدشو نشان داده می شود.
حالا نوبت css برای این اسلایدشو می رسد: (کدهای زیر باید در پوشه css قالب خودتون قرار بدید.)
کد زیر را در css خود کپی کنید:

سایز اسلایدر خود را در اینجا باید تغییر دهید این اسلایدشو به طور پیش فرض 500 در 300 پیکسل است در صورتی می خواهید ابعاد اسلایدر را عوض کنید در کد css بالا تغییرات را اعمال کنید.
حالا نوبت کار اصلی یعنی اضافه کردن کد جی کوئری می رسد:(دقت داشته باشید کد زیر را بهتره در انتهای صفحه ای که کد html  در آن قرار دارد بگذارید.)

حالا می تونین از اسلایدشو خود لذت ببرین.

دموی این اسلایدشو:

برچسب ها:
اشتراک گذاری:
درباره نویسنده: محمد رضا

برنامه نویس / توسعه دهنده وب / سئو و بهینه سازی / طراح رابط کاربری

نظرات: