معرفی پلاگین جی کوئری OWL Carousel

پلاگین جی کوئری owlcarousel ساخت اسلایدرها رو برای ما خیلی آسون کرده. اسلایدرهای کاملا واکنش گرا (responsive)، دارای انیمیشن‌های روان که جلوه‌ی طراحی رو خیلی زیبا میکنه. از مزایای دیگه‌ی این پلاگین سبک بودن و پشتیبانی از مرورگرهای مدرن و به قول خود owlcarousel مرورگرهای زامبی هست. به تازگی نسخه جدید (دوم) این پلاگین هم معرفی شده.

برای استفاده از پلاگین چه باید کرد ؟

تمامی مراحل نصب پلاگین در how to use آورده شده که اون رو در زیر آورده شده:

مرحله اول: فراخوانی فایل‌های css و js

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

مرحله دوم: نوشتن کدهای html و ساخت اسلاید مد نظرمون

<div id="owl-example" 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-example").owlCarousel();
 
});

خیلی خوشحال میشم از راه حل‌های شما برای ساخت اسلایدر مطلع بشم.

سورس کد owl carousel بر روی گیت‌هاب ، سایت پلاگین owlcarousel ، نسخه جدید پلاگین