اسلایدر واکنش گرا در دروپال با Owl Carousel

اگر شما هم  فروشگاه اینترنتی دارید باید به فکر راحتی مشتریان خود باشید و در عین حال به زیبایی فروشگاه خود هم دقت کنید. در این مقاله ما به شما دوستان افزونه ایی را معرفی خواهیم کرد که نه تنها در یک فروشگاه بلکه در هر نوع سایتی می توانید به کمک آن یک اسلایدر واکنش گرا, زیبا و حرفه ایی برای نمایش جدیدترین اخبار یا جدیدترین محصولات خود ایجاد کنید. با ما همرا باشید.

حتما بخوانید : چگونه در دروپال یک اسلایدشو داشته باشیم؟

برخی از ویژگی های owl carousel :

  • واکنش گرا

  • پشتیبانی از رویدادهای لمسی

  • پشتیبانی از رویدادهای کلیکی

  • قابلیت انتخاب تعداد آیتم ها برای نمایش در اسلایدر

  • مولتی اسلایدر

  • پشتیبانی از CSS3

  • و...

اسلایدر واکنش گرا در دروپال با Owl Carousel

مراحل ایجاد اسلایدر واکنش گرا در دروپال :

مرحله اول : نصب

اگر از ورژن 1.x این افزونه استفاده می کنید :

  1. افزونه owl carousel را دانلود و در مسیر sites/all/modules قرار دهید.

  2. افزونه های jquery update , views , libraies , variable را دانلود و نصب کنید

  3. کتابخانه owl carousel(1.x) را دانلود کنید.

  4. کتابخانه دانلود شده بالا را در مسیر sites\all\libraries\owl-carousel قرار دهید به طوریکه فایل owl.carousel.js در مسیر sites\all\libraries\owl-carousel\owl.carousel.js قرار بگیرد.

اگر از ورژن x.2 این افزونه استفاده می کنید :

  1.  مراحل 1 و 2 را انجام دهید

  2. کتابخانه owl carousel(2.x) را دانلود کنید.

  3. کتابخانه دانلود شده بالا را در مسیر sites\all\libraries\owl-carousel قرار دهید به طوریکه فایل owl.carousel.js در مسیر sites\all\libraries\owl-carousel\owl.carousel.js قرار بگیرد.

مرحله دوم :پیکربندی افزونه

برای دسترسی به صفحه تنظیمات این افزونه کافیست به مسیر admin/config/user-interface/owlcarousel  برید.

اسلایدر واکنش گرا در دروپال

در این صفحه ما می توانیم گروه های متغیر را تعریف کنیم برای درک این موضوع به این مثال توجه کنید :

فرض کنید در قسمتی از سایت نیاز داریم که 4 محصول در کنار هم قرار بگیرند و به صورت اسلاید نمایش داده شود (حتی می توانید تعیین کنید که در سایزهای مختلف چه تعداد از محصولات در کنار یکدیگر قرار بگیرند.) و در قسمتی دیگر 3 محصول، شما برای ایجاد این گروه های نمایش باید از این قسمت اقدام به ایجاد add groups کنید.

مرحله سوم: ایجاد یک اسلایدر با ویوز

اسلایدر واکنش گرا در دروپال

کافیست یک ویوز از نوع بلوک ایجاد کنید و از قسمت حالت نمایش در ویوز مانند تصویر بالا، owl carousel  را انتخاب کنید. و در صفحه بعد بر اساس نیاز خود یکی از گروه ها را بر اساس نیاز خود انتخاب کنید.

اسلایدر واکنش گرا در دروپال

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

مرحله پایانی : خلاقیت

حالا وقت آن رسیده که، با کمی css ظاهری زیبا به اسلایدر خود بدهید.

اسلایدر واکنش گرا در دروپال

 

صفحه افزونه owl carousel

 

دمو

admin
جواد اصغری هستم مدیر سایت مرکز دروپال ایران ، یک طراح که از سال 89 با دروپال کار می کنم به گرافیک علاقه خاصی دارم و سعی می کنم کارهام در این چهارچوب قرار بگیرن
تصویر Hesam18200
Hesam18200
د., 07/18/2016 - 15:02

سلام
مرسی از آموزشی که قراردادین ، اگر امکانش هست یک نمونه دمو برای هر چیزی که آموزش میدین بزارید.


تصویر admin
admin
د., 07/18/2016 - 15:59

سلام دوست من
طبق خواسته شما لینک دمو افزوده شد.


مرکز دروپال ايران

راه های ارتباط با ما

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing