پلاگین owlcarousel

JavascriptjQueryکاربردی   
19 ژوئن 2018   

برای ایجاد یک اسلایدر ساده و کاربردی و پیشرفته از پلاگین owlcarousel استفاده می کنیم برای آموزش این پلاگین جی کوئری آموزش را دنبال کنید.

زمانی که شما می خواهید یک اسلایدر کاربر پسند و پیشرفته  ایجاد کنید که درون آن به عنوان مثال عکسی یا متنی در حال چرخش باشد و بتوان آن را مانند اسلایدر عوض کرد باید از این پلاگین بسیار رایج که معمولا خیلی از سایت ها استفاده می کنند استفاده کنید

پس با ما همراه باشید

نصب:

1-فایل بالا را بارگیری و استخراج کرده و فایل های owl.carousel.min.css و owl.theme.default.min.css را به فایل های پروژه خود اضافه کنید و لینک آن را نیز درون سند اچ تی ام ال خود بدهید مانند زیر: (قبل از هد)

2-حالا برای فایل های جاوا اسکریپت هم همان کار را تکرار کنید فایل های owl.carousel.js و owl.carousel.min.js را به فایل پروژه اضافه کرده و لینک آن را مانند قبل بدهید (قبل ازبادی) لینک اصلی جی کوئری فراموش نشود

3-این اسکریپت را نیز بعد از لینک های جاوا اسکریپت بالا قرار دهید مانند زیر:

استفاده:

1-حالا یک دایو با کلاس owl-carousel ایجاد کرده و درون آن به تعداد دلخواه دایو با کلاس item ایجاد کرده و درون دایو با کلاس item می توان div,img,a,h1,h2 و … گذاشت مانند زیر:

چند نکته: اول اینکه ما برای مثال از تگ h4 داخل دایو با کلاس item استفاده کردیم شما می توانید از هر چیزی که در بالا نام برده شد استفاده کنید و در این کار الزامی وجود ندارد ودوم اینکه کلاس owl-theme را برای زیبا تر شدن به اسلایدر دادیم و پیشنهاد می کنم شماهم از آن استفاده کنید

2- حالا استایل های سی اس اس خود را بدهید ما برای مثال از این استایل ها استفاده کردیم شما در این کار آزادید

کل کدهای استفاده شده در یک نگاه:

امیدوارم این آموزش برایتان مفید واقع شده باشد ولذت برده باشید اگر سوال یا نظری داشتید درخدمت هستیم.