تبلیغات

پلاگین Owl Carousel جی کوئری – ساخت اسلایدشوی لمسی و واکنش گرا

پلاگین Owl Carousel جی کوئری - ساخت اسلایدشوی لمسی و واکنش گرا
هادی اکبرزاده
نوشته شده توسط هادی اکبرزاده

پلاگین Owl Carousel جی کوئری
ساخت اسلایدشوی لمسی و واکنش گرا با استفاده از جی کوئری


Owl Carousell، یک اسلاید شو لمسی می‌باشد که برای طراحی‌های زیبا در سایت‌ها، مورد استفاده قرار می‌گیرد. یک اسلاید شو واکنش‌گرا، که دارای انیمیشن‌های روانی بوده و ازنظر حجم، بسیار سبک می‌باشد.

این پلاگین محبوب حی کوئری حتی نسخه وردپرسی هم دارد.

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

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

ابتدا استایل‌ها و اسکریپت‌های مورد نیاز را به قالب خود اضافه کنید.

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


برای استفاده از این کتابخانه، تنها کافی است یک المنت ایجاد کنید که شامل کلاس سی اس اس owl-carousel شود و سپس درون المنت‌هایتان را قرار دهید؛ مثلا به صورت زیر:

سپس باید آن را با استفاده از OWL قرارخوانی کنید؛ این کار از طریق جاوا اسکریپت صورت می‌گیرد:

خب همانطور که می‌بینید، تنها المنت را انتخاب کرده و متد owlCarousel را اجرا کرده‌ایم؛ کار تمام است.
اما برای این‌که کمی خوشکل تر دیده شود، به مثال زیر دقت کنید.

مثال

این مثال را اجرا کرده و بررسی کنید.

آپشن‌ها

در مثال بالا، چند آپشن را در متد owlCarousel تنظیم کرده‌ایم.


items
نوع: Number
پیش‌فرض: 3

تعداد آیتم‌هایی که می خواهید بر روی صفحه نمایش ببینید.


margin
نوع: Number
پیش‌‌فرض: 0

مقدار margin-right آیتم‌ها


loop
نوع: Boolean
پیش‌فرض: false

اسلاید در زمان رسیدن به انتها از ابتدا شروع خواهد شد و برعکس!


center
نوع:Boolean
پیش‌فرض: false

وسط چین شدن محتوا (مرکزچین)


mouseDrag
نوع: Boolean
پیش‌فرض: true

با ماوس بتوان درگ کرد یا نه.


touchDrag
نوع:  Boolean
پیش‌فرض: true

با تاچ بتوان درگ کرد یا نه.


pullDrag
نوع: Boolean
پیش‌فرض: true

Stage pull to edge


freeDrag
نوع: Boolean
پیش‌فرض: false

Item pull to edge


stagePadding
نوع: Number
پیش‌فرض: 0

Padding left and right on stage (can see neighbours)


merge
نوع: Boolean
پیش‌فرض: false

Merge items. Looking for data-merge='{number}’ inside item


mergeFit
نوع: Boolean
پیش‌فرض: true

Fit merged items if screen is smaller than items value


autoWidth
نوع: Boolean
پیش‌فرض: false

Set non grid content. Try using width style on divs


startPosition
نوع: Number/String
پیش‌فرض: 0

Start position or URL Hash string like ‘#id’

URLhashListener
نوع: Boolean
پیش‌فرض: false

Listen to url hash changes. data-hash on items is required


nav
نوع: Boolean
پیش‌فرض: false

Show next/prev buttons


rewind
نوع: Boolean
پیش‌فرض: true

Go backwards when the boundary has reached


navText
نوع: Array
پیش‌فرض: ['next','prev']

HTML allowed


navElement
نوع: String
پیش‌فرض: div

DOM element type for a single directional navigation link


slideBy
نوع: Number/String
پیش‌فرض: 1

Navigation slide by x. ‘page’ string can be set to slide by page

dots
نوع: Boolean
پیش‌فرض: true

Show dots navigation


dotsEach
نوع: Number/Boolean
پیش‌فرض: false

Show dots each x item


dotData
نوع: Boolean
پیش‌فرض: false

Used by data-dot content


lazyLoad
نوع: Boolean
پیش‌فرض: false

Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not <img>


lazyContent
نوع: Boolean
پیش‌فرض: false

lazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. It is a nice options so i will work on it in the nearest feature


autoplay
نوع: Boolean
پیش‌فرض: false

Autoplay


autoplayTimeout
نوع: Number
پیش‌فرض: 5000

Autoplay interval timeout


autoplayHoverPause
نوع: Boolean
پیش‌فرض: false

Pause on mouse hover


smartSpeed
نوع: Number
پیش‌فرض: 250

Speed Calculate. More info to come


fluidSpeed
نوع: Boolean
پیش‌فرض: Number

Speed Calculate. More info to come


autoplaySpeed
نوع: Number/Boolean
پیش‌فرض: false

autoplay speed


navSpeed
نوع: Number/Boolean
پیش‌فرض: false

Navigation speed


dotsSpeed
نوع: Boolean
پیش‌فرض: Number/Boolean

Pagination speed


dragEndSpeed
نوع: Number/Boolean
پیش‌فرض: false

Drag end speed


callbacks
نوع: Boolean
پیش‌فرض: true

Enable callback events


responsive
نوع: Object
پیش‌فرض: empty object

Object containing responsive options. Can be set to false to remove responsive capabilities.


responsiveRefreshRate
نوع: Number
پیش‌فرض: 200

Responsive refresh rate


responsiveBaseElement
نوع: DOM element
پیش‌فرض: window

Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.


video
نوع: Boolean
پیش‌فرض:  false

Enable fetching YouTube/Vimeo/Vzaar videos


videoHeight
نوع: Number/Boolean
پیش‌فرض: false

Set height for videos


videoWidth
نوع: Number/Boolean
پیش‌فرض: false

Set width for videos


animateOut
نوع: String/Boolean
پیش‌فرض: false

Class for CSS3 animation out


animateIn
نوع: String/Boolean
پیش‌فرض: false

Class for CSS3 animation in


fallbackEasing
نوع: String
پیش‌فرض: swing

Easing for CSS2 $.animate


info
نوع: Function
پیش‌فرض: false

Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.


nestedItemSelector
نوع: String/Class
پیش‌فرض: false

Use it if owl items are deep nested inside some generated content. E.g ‘youritem’. Dont use dot before class name.


itemElement
نوع: String
پیش‌فرض: div

DOM element type for owl-item


stageElement
نوع: String
پیش‌فرض: div

DOM element type for owl-stage


navContainer
نوع: String/Class/ID/Boolean
پیش‌فرض: false

Set your own container for nav


dotsContainer
نوع: String/Class/ID/Boolean
پیش‌فرض: false

Set your own container for nav

کلاس‌ها

این بخش فعلا آماده نشده است.

 

رویدادها

این بخش فعلا آماده نشده است.

 

تبلیغات
0
کانال تلگرام فول کده

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

هادی اکبرزاده

هادی اکبرزاده

[ مدیر فول کده ]

آن‌گاه که هرچیزی را به یک چشم دیدیم، حقیقت برایمان نابود می‌شود! باید توجه کنیم که خدا به ما دو چشم داده است!
Telegram

پاسخ دهید

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

قوانین نظرات

  • تعریف سیستم نظرات: سیستم نظرات، محلی است تا شما دوستان عزیز بتوانید دیدگاه خود را نسبت به مطلب قرار گرفته بنویسید، نه چیز دیگری!
  • نظراتی که به بهبود پست کمک کنند، با ذکر نام ارسال کننده به پست اضافه خواهند شد.
  • برای ارسال نظر، نیازی به سلام و احوال‌پرسی نیست و این فقط به خاطر ساده‌تر و سریع تر شدن متن می‌باشد.
  • دیدگاهی که ارسال می‌کنید، حتما باید درباره‌ی پست قرار گرفته باشد؛ نظرات پست‌های دیگر را در جای خود بنویسید در غیر این‌صورت تایید یا پاسخ داده نخواهند شد.
  • سوالی که جواب آن در پست وجود داشته باشد، تایید یا پاسخ داده نخواهد شد.
  • برای پاسخ دادن به نظرات دیگران، از گزینه‌ی پاسخ کنار هر دیدگاه استفاده کرده و یک نظر جدید ارسال نفرمایید. همچنین برای ارسال نظر جدید از گزینه‌های مربوط به پاسخ استفاده نکنید.
  • دوستان عزیز واقعا نظر لطف شماست اما متن‌های کوتاهی مانند "مرسی"، "عالی بود" ممکن است تایید نشوند. این به خاطر شلوغ نشدن قسمت نظرات است.
  • بهتر است برای ارسال نظر در سایت ثبت نام کنید و سپس با اکانت خود وارد شده و نظرتان را ارسال کنید.
  • قوانین نظرات در طول زمان در این قسمت اضافه و تغییر داده می‌شوند و می‌توانید از این قسمت بررسی کنید.
  • این قوانین شامل پست های قدیمی نمی‌شود ولی نظرات پست های قدیمی نیز در صورت نیاز اصلاح خواهند شد.

نظرات ثبت شده بدون دیدگاه