استارت‌آپ و کارآفرینی

معرفی پلاگین جی کوئری 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 ، نسخه جدید پلاگین

2 نظرات
  1. نوید کاشانی می گوید

    این اسکریپت در زمان خودش بهترین بود ولی با اومدن Slick js جایگاهش رو از دست داد. به همین منظور نویسندش شروع به نوشتن نسخه ۲ کرد ولی بعد از یک مدت طولانی اعلام کرد که نیمتونه وقت روی توسعش بزاره و سپرد به یک تیم دیگه که اون ها هم به طور مناسبی توسعش نمی دن. خلاصه اینکه بهترین اسکریپتی که امروز برای انجام این کار وجود داره Slick هست:

    http://kenwheeler.github.io/slick/

  2. آربی می گوید

    به نظرم هنوز هم owl محبوب ترین پلاگین جکوئری در این زمینه است

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.