ستروکیت

ساخت اسلایدرهای زیبا با پلاگین jQuery قدرتمند Owl Carousel j تا به حال به این اندازه ساده و لذت بخش نبوده‌است. در این مقاله قصد داریم تا شما را با Owl Carousel بیشتر آشنا کنیم و شیوه استفاده آن را به شما آموزش دهیم.

کاملا قابل سفارشی سازی

آسان برای کاربران تازه کار و حتی فدرتمند برای توسعه دهندگان حرفه‌ای

پشتیبانی از صفحات لمسی

به ویژه برای بهبود تقویت تجربه در مرورگرهای موبایل طراحی شده است

کاملا ریسپانسیو

تقریبا همه گزینه‌ها ریسپانسیو هستند و شامل تنظیمات مختلف برای صفحات ریسپانسیو می‌باشد

مرورگرهای مدرن

Owl از CSS3 و ویژگی‌های آن استفاده می‌کند که باعث افزایش سرعت آن می‌شود

مرورگرهای زامبی

همچنین از CSS2 برای مرورگرهای قدیمی پشتیبانی می‌کند.

ماژول‌ها و پلاگین‌ها

Owl از ساختار ماژولار افزونه‌ها پشتیبانی می‌کند. بنابراین شما می‌توانید افزونه‌هایی را که در پروژه‌تان استفاده نمی‌کنید جدا کنید یا بعدا اضافه کنید.

چطور استفاده کنیم

۱- قرار دادن CSS

نخست، دو فایل Css را در هد کد HTML خود قرار دهید:

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

owl.carousel.css ضروری است و حتما باید قبل از فایل‌های *.js قرار بگیرد.

فایل owl.theme.default.css اختیاری است و می‌توانید با خیال راحت ویرایشش کنید. اگر نخواهید و یا شاید دوست نداشته باشید که از ظاهر پیش فرض استفاده کنید ضروری می‌باشد.

۲- قرار دادن JS

jQury و فایل owl.carousel.min.js را در فوتر، قبل از body قرار دهید.

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

3- کد HTML

برای این پلاگین شما نیاز به یک عنصر خاص ندارید. همه‌ی چیزی که نیاز دارید این است که divهای(owl با هر نوع عنصر کار می‌کند، a,img,span,li و ...) خود را در داخل یک در برگیرنده <div class="owl-carousel"> بگذارید. کلاس  "owl-carousel" ظروری است تا استایل‌های مناسب از فایل owl.carousel.css به مار برد.

 <!-- 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>

۴- فراخوانی پلاگین

حال تابع آغازگر Owl را فراخوانی کنید و اکنون اسلایدر شما آماده است.

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

تنظیمات حرفه‌ای‌تر

Owl دارای تنظیمات زیادی هست که در اینجا به چند مورد از آنها اشاره می‌کنیم. برای دیدن مستندات کامل می‌توانید به سایت Owl Carousel مراجعه کنید.

برای اینکه بتوانید گزینه‌های بیشتر به تابع آغازگر ‌Owl بدهید، تابع را بصورت زیر فراخوانی کنید:

$('.owl-carousel').owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  responsive:{
    0:{
      items:1
    },
    600:{
      items:3
    },
    1000:{
      items:5
    }
  }
})

برخی از گزینه‌ها:

• items: تعداد آیتم‌هایی که می‌خواهید در صفحه نمایش داده شود.
• loop: برای چرخش اسلایدها، اگر true باشد زمانی که به پایان آیتم‌ها رسید چرخه را از اول تکرار می‌کند.
• margin: حاشیه بین آیتم‌ها
• nav: فلش‌های تغییر اسلاید (true, false)
• responsive: برای حالت ریسپانسیو است که می‌توانید مشخص کنید در چه اندازه‌ای چند آیتم نمایش دهد.
• autoplay: چرخش اتوماتیک (true, false)
• rtl: برای نمایش راست چین (true, false)
• و گزینه های دیگر Owl Options

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