تبلیغات

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

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

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


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

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

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

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

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

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


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

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

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

مثال

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

API

این بخش مربوط به API کتابخانه است که جهت مشاهده آن در سایت اصلی می‌توانید «اینحا» کلیک کنید.

آپشن‌ها

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

تعداد آیتم‌هایی که می‌خواهید بر روی صفحه نمایش ببینید. (در مثال بالا، برای حالت‌های مختلف ریسپانسیو، تعداد آیتم‌های مختلفی تنظیم شده است.)


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

مقدار margin-right آیتم‌ها (فاصله از راست)


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

حلقه بی‌نهایت. در صورت true شدن، اسلاید در زمان رسیدن به انتها از ابتدا شروع خواهد شد و برعکس!


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

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


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

کلاس‌ها

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

رویدادها

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

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

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

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

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

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس و دانشجوی ارشد رشته شبیه‌ساز هوشمند / همچنین در حال نوشتن یه رمان فانتزی (اگه خدا بخواد و تموم شه 😂)

پاسخ دهید

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

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

    1. Rahimpour گفت:

      ممنونم از آموزشتون عالی بود

    2. Arefe گفت:

      سلام ممنون از سایت خوبتون من از این پلاگین استفاده کردم به صورت تنها خوب عمل میکرد ولی وقتی تو یه پروژه که المان ها و اسکریپت های مختلفی داشت استفاده کردم کامل از بین رفت و نمایش داده نشد علتش چیه اگه امکانش هست راهنمایی کنید ممنون

      1. هادی اکبرزاده گفت:

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

    3. محمود گفت:

      سلام عالی بود. مشکلم حل شد. دعاتون می کنم.

      1. متین گفت:

        سلام وقت بخیر بنده هم دقیقا به همین مشکل خوردم و وقتی فایل jquery.min.js رو لود میکنم کاملا از بین میره و نمایش داده نمیشه…میشه لطف کنید از روشی که استفاده کردید بگید؟؟