صفحه اصلی / آموزش طراحی سایت / آموزش استفاده از اسلایدر Owl Carousel در سایت

آموزش استفاده از اسلایدر Owl Carousel در سایت

در این پست از پی سی گرام به آموزش استفاده از اسلایدر Owl Carousel در سایت می پردازیم با استفاده از این اسلایدر زیبا شما میتوانید اسلایدشویی داشته باشید که سازگار با موبایل و تاچ می باشد. اکثر سایتهای بزرگ و معروف از این اسلایدر در سایت های خود استفاده میکنند.

آموزش استفاده از اسلایدر Owl Carousel در سایت

 

برای اینکه بتوانیم در وب سایت خود یک اسلایدر قوی و حرفه ای داشته باشیم بی شک OWl Carousel یک گزینه عالی است. با این اسلایدر شما هم میتوانید تصاویر و هم ویدئوهای خود را بصورت اسلاید به کاربر نمایش دهید.

از دیگر ویژگی های مهم و کلیدی اسلایدر OWL Carousel قابلیت تاچ آن می باشد که باعث میشود که به راحتی در Device های مختلف از جمله گوشی و تبلت قابل نمایش باشد.

 

در ادامه با آموزش نحوه کار با اسلاید OWL Carousel با شما هستیم.

 

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

که برای این کار یا میتونیم به سایت owlcarousel2 مراجعه کنیم و فایل های مورد نیاز را دانلود کنیم و یا اینکه میتوانیم از CDN های زیر استفاده کنیم:

افزودن امکان استفاده از اسلایدر OWL Carousel به وب سایت:

با درج کدهای بالا در تگ Head خود میتوانید استایل های css و کدهای جاوااسکریپت مورد نیاز افزونه OWL Carousel را به صفحه سایت خود اضافه کنید.

موردهای دوم و سوم یعنی owl.theme.default.min.css و همچنین owl.theme.green.min.css” اختیاری هستند.

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

 

افزودن اسلایدر با OWL Carousel به وب سایت

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

در واقع باید یک المان با کلاس owl-carousel  را در فرم خود داشته باشیم. منتها از آنجا که در اکثر سایت های امروزی از بوت استرپ برای رسپانسیو کردن صفحات استفاده میشود در این آموزش با فرض استفاده از  بوت استرپ کدهای زیر را برای شما آماده کرده ایم:

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

 

تابع راه اندازی اسلایدر OWL Carousel

در ادامه این کد را درج کرده ایم و تنظیمات مختلفی را نیز در این تابع بر روی اسلایدر خود اعمال کرده ایم:

به این ترتیب و با استفاده از این کدها شما میتوانید یک اسلایدر فوق حرفه ای و بروز را در سایت خود داشته باشید.

درباره حجت میرزائی

- مهندس کامپیوتر و دارای مدرک کارشناسی ارشد هوش مصنوعی هستم. - مدرس دانشگاه - علاقه شدیدی به هوش مصنوعی و کدنویسی Matlab دارم. - برنامه نویس و طراح وب سایت با تکنولوژی .Net هستم. - همچنین با CMSهایی مانند وردپرس کار میکنیم. عاشق سئو و متخصص سئوی وب سایت های شرکتی و ... .

یک دیدگاه

  1. سلام. ممنون بابت آموزش خوبی که ارائه کردین. یه سوال داشتم . سایت من وردپرسی هست . آیا میتونم از اسلایدر Owl Carousel در سایت وردپرسی خودم استفاده کنم؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *