ویژگی‌های زیر که باعث 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 شوید.

The post معرفی پلاگین جی کوئری OWL Carousel appeared first on وب دیزاین.