معرفی پلاگین جی کوئری OWL Carousel

27 امتیاز

Loading…

OWL Carousel یک اسلاید شو لمسی می‌باشد که برای طراحی‌های زیبا در سایتها مورداستفاده قرار می‌گیرد. یک اسلاید شو واکنش گرا دارای انیمیشن‌های روان و ازنظر حجم بسیار سبک می‌باشد. پلاگین جی کوئری owlcarousel ساخت اسلایدها رو برای ما خیلی آسان کرده.این پلاگین محبوب حی کوئری حتی نسخه وردپرسی هم دارد.

ویژگی‌های زیر که باعث OWL Carousel شده منحصربه‌فرد باشد:

مهم نیست شما یک حرفه‌ای باشید یا مبتدی کار با این اسلاید بسیار آسان می‌باشد.

آموزش کار با OWL Carousel:

اولین قدم دانلود کردن کتابخانه OWL Carousel می‌باشد.که از اینجا دانلود کنید.

اگر هم نخواستید کتابخانه را دانلود کنید مشکلی به وجود نمی‌آید و شما می‌توانید آدرس‌دهی را از طریق سایت owl انجام دهید.

برای نصب اسلاید شو:

• دو فایل CSS را به HTML خود قبل از *.js اضافه کنید، توجه کنید که مورد دوم اختیاری است و به‌راحتی می‌توانید آن را ویرایش کنید.

<ink rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

• حال باید carousel.min.js را اضافه کنید:

<script src="owlcarousel/owl.carousel.min.js"></script>

• شما به  نشانه‌گذاری خاصی برای HTML ندارید کافی است <div class = “owl-carousel”> را صدا بزنید:

<!-- Set up your HTML -->
<div class="owl-carousel">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
</div>

• برای آماده‌سازی و خواندن اسلاید باید با پلاگین خود ارتباط برقرار کنید پس در فایل جی کوئری خود کد زیر را وارد کنید:

$(document).ready(function(){
 $(".owl-carousel").owlCarousel();
});

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

1-گزینه‌ها:

• Item: تعداد اقلامی که می‌خواهید بر روی صفحه‌نمایش ببینید.

Type: Number

Default: 3

• Loop: حلقه بی‌نهایت.

Type: Boolean

Default: false

• touchDrag: کشیدن لمسی فعال‌شده است.

Type: Boolean

Default: true

• Autoplay: پخش خودکار.

Type: Boolean

Default: false

2-این نمونه‌ای از چگونگی ارائه HTML است. با گزینه‌های زیر می‌توانید تقریباً هر کلاس را به شیوه‌ای که می‌خواهید نحوه نمایش را تغییر دهید. گزینه‌ها:

• rtlClass: کلاس برای حالت راست به چپ.

Type: String

Default: owl-rtl

• dragClass: کلاس برای حالت کشیدن ماوس.

Type: String

Default: owl-drag

• responsiveClass: کلاس کمکی اختیاری.

Type: String|Boolean

Default: false

3-رویدادهای که توسط اسلاید قابل‌تغییر می‌باشد:

• owl.lazy: بارگذاری خاص عکس‌ها. (تنبل)

Type: attachable

Callback: onLoadLazy

• هنگامی‌که عکس‌ها کند (تنبل) بارگذاری می‌شوند.

Type: attachable

Callback: onLoadedLazy

• owl.autoplay: اجرای خودکار.

Type: triggerable

Parameter: [timeout, speed]

• owl.autoplay: توقف خودکار پخش.

Type: triggerable

خب این هم از آموزش این اسلایدشو زیبا پیشنهاد ما استفاده از این پلاگین زیبا می باشد.برای دیدن و آشنایی بیشتر وارد سایت خود OWL Carousel شوید.