ساخت اسلایدر با جی کوئری

با سلام. در این مطلب آموزش کامل ساخت اسلایدشو به کمک جی کوئری JQuery رو براتون گذاشتم. در این آموزش با مراحل ساخت یک اسلایدشو به کمک JQuery به خوبی آشنا خواهید شد. موتور اصلی این اسلاید شو پلاگین JQuery Cycle است که خواهید توانست به کمک آن یک اسلایدشو ساده با دکمه های کنترل بسازید. ادامه آموزش در ادامه مطلب موجود می باشد.

جهت مشاهده آموزش کامل ساخت اسلایدشو به کمک جی کوئری JQuery به ادامه مطلب مراجعه نمایید.

HTML :

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

 

در مرحله بعد باید یک بلوک دیگه برای اضافه کردن عکس ها به اون بلوک که در مرحله قبل ساختیم اضافه کنیم . کدهای زیر را اضافه کنید :

 

پس تا اینجا باید کدهای شما مثل این باشه :

 

خوب ، تو این مرحله باید دکمه های کنترلی رو اضافه کنیم . مثل کدهای زیر :

 

 

JQuery :

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

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

توی این بخش می تونید هر طوری که خودتون دوست دارید تغییرات ایجاد کنید . مثل افکت ، ترتیب ،عرض ، ارتفاع و …
می تونید همه تنظیمات رو اینجا ببینید

CSS – قالب بندی اسلایدشو :

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

 

عکس های اسلایدر رو هم میتونید از این لینک دانلود کنید.

برای تازه شدن دیر نیست.

موفق و پیروز باشید