۲۷ امتیاز 
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();
});
خب این نحوه نصب اسلاید با موفقیت انجام شد. حال در ادامه می‌خواهم چند تا از امکانات و نحوه تغییر آن‌ها رو توضیح بدم. تمام مقدارهای که می‌بینید به‌صورت پیش‌فرض هستند شما این امکان رودارید تا مقدار را تغییر دهید.
۱-گزینه‌ها:
- Item: تعداد اقلامی که می‌خواهید بر روی صفحه‌نمایش ببینید.
Type: Number
Default: 3
- Loop: حلقه بی‌نهایت.
Type: Boolean
Default: false
- touchDrag: کشیدن لمسی فعال‌شده است.
Type: Boolean
Default: true
- Autoplay: پخش خودکار.
Type: Boolean
Default: false
۲-این نمونه‌ای از چگونگی ارائه HTML است. با گزینه‌های زیر می‌توانید تقریباً هر کلاس را به شیوه‌ای که می‌خواهید نحوه نمایش را تغییر دهید. گزینه‌ها:
- rtlClass: کلاس برای حالت راست به چپ.
Type: String
Default: owl-rtl
- dragClass: کلاس برای حالت کشیدن ماوس.
Type: String
Default: owl-drag
- responsiveClass: کلاس کمکی اختیاری.
Type: String|Boolean
Default: false
۳-رویدادهای که توسط اسلاید قابل‌تغییر می‌باشد:
- owl.lazy: بارگذاری خاص عکس‌ها. (تنبل)
Type: attachable
Callback: onLoadLazy
- هنگامی‌که عکس‌ها کند (تنبل) بارگذاری می‌شوند.
Type: attachable
Callback: onLoadedLazy
- owl.autoplay: اجرای خودکار.
Type: triggerable
Parameter: [timeout, speed]
- owl.autoplay: توقف خودکار پخش.
Type: triggerable
خب این هم از آموزش این اسلایدشو زیبا پیشنهاد ما استفاده از این پلاگین زیبا می باشد.برای دیدن و آشنایی بیشتر وارد سایت خود OWL Carousel شوید.
