بسیاری از افراد در سایت خود می خواهند اسلایدرها را ببینند - اینها بلوک هایی هستند که یک عنصر محتوا را روی صفحه نمایش می دهند و پس از مدت زمان معینی این محتوا را به دیگری تغییر می دهند. به طور طبیعی، هر توسعه دهنده وب می تواند به طور مستقل یک نوار لغزنده با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کند، اما این همیشه منطقی نیست. با وجود اینکه راه حل های آماده زیادی در اینترنت وجود دارد که زندگی شما را بسیار آسان تر می کند و سایت شما را بسیار جذاب تر می کند، زمان زیادی را صرف خواهید کرد. این مقاله بر روی یکی از این راه حل ها به نام چرخ فلک جغد تمرکز خواهد کرد. راه اندازی این نوار لغزنده فوق العاده ساده است، بنابراین حتی یک مبتدی نیز می تواند از عهده آن برآید. اکنون خواهید آموخت که این نوار لغزنده چیست و همچنین جزئیات مهم دیگر را خواهید آموخت. راه اندازی Owl Carousel یک فرآیند گام به گام است، بنابراین شما باید این مطالب را فقط به ترتیب مطالعه کنید.
چیست و چرا باید این نوار لغزنده خاص را انتخاب کنید؟
Owl Carousel که در این مقاله به پیکربندی آن پرداخته خواهد شد، افزونه ای بسیار کارآمد است که یک اسلایدر زیبا و راحت به صفحه شما اضافه می کند که کار شما را در سایت بسیار آسان می کند.صرفه جویی زیادی در زمان، تلاش و پول. مزایای این افزونه خاص چیست، زیرا اسلایدرهای بسیار زیادی در وب وجود دارد؟ واقعیت این است که این نوار لغزنده ده ها گزینه سفارشی سازی را به شما ارائه می دهد که به شما امکان می دهد صفحه خود را منحصر به فرد و تکرار نشدنی کنید. این یک پلاگین واکنش گرا است که روی تمام نسخه های مرورگر کار می کند و می تواند به راحتی به وردپرس و سایر CMS های محبوب متصل شود. به طور کلی، این نوار لغزنده دارای مزایای زیادی است، بنابراین باید قطعاً به نفع آن انتخاب کنید. با این حال، قبل از شروع به راه‌اندازی Owl Carousel، این افزونه هنوز باید بارگیری شود.
دانلود
تنظیم Owl Carousel 2 اگر آن را در رایانه خود دانلود نکرده باشید امکان پذیر نیست و از آنجایی که این یک دستورالعمل گام به گام است، باید از همان ابتدا شروع کنید. بنابراین، برنامه را می توان با استفاده از مدیران بسته دانلود کرد، اما اینها ابزارهای توسعه دهنده پیشرفته هستند، بنابراین در اینجا به شما خواهیم گفت که چگونه این افزونه را به روش استاندارد دریافت کنید. باید به وب سایت رسمی افزونه رفته و آخرین نسخه آن را دانلود کنید. پس از آن، تمام فایل های دانلود شده باید با تهیه یک پوشه مناسب که به نام خود افزونه است، به دایرکتوری سایت شما منتقل شوند. توجه داشته باشید که این افزونه با جی کوئری همراه است، بنابراین باید آن کتابخانه را نیز در دسترس داشته باشید. خوب، هنگامی که این افزونه را دانلود کردید، باید مراحل بعدی را که تنظیم نوار لغزنده Owl Carousel 2 است، انجام دهید.
CSS
Bتنظیمات Owl Carousel 1.3 تقریباً مانند نسخه جدیدتر 2 باقی مانده است، فقط ویژگی های جدید اضافه شده است. با این حال، اطلاعات اولیه یکسان خواهد بود و با افزودن CSS به سند شما شروع می شود. بنابراین اولین قدم اضافه کردن خط است. او به شما چه می دهد؟ این رشته ای است که استایل های لازم را برای نمایش اسلایدر در سایت بارگذاری می کند. این جایی است که می توانید با انجام پردازش بصری خودتان به پایان برسانید. با این حال، راه حل راحت تر و سریع تری وجود دارد. همچنین می‌توانید خطی اضافه کنید که تم پیش‌فرض اسلایدر را نیز بارگیری کند و آن را فوراً آماده استفاده کند. شما می توانید برخی از سبک ها را ویرایش کنید تا اسلایدر خود را منحصر به فرد تر و متفاوت تر کنید و برای محتوای خود مناسب تر کنید. طبیعتاً تنظیمات Owl Carousel به زبان روسی بسیار راحت خواهد بود، اما هر شخصی که وب سایت ایجاد می کند باید بداند که بدون دانش انگلیسی نمی تواند کار کند.
اتصال جاوااسپریپت
البته اسلایدر بدون JS کار نمی کند، بنابراین باید مراقب باشید که فایل مناسب حاوی کدهای لازم را نیز قرار دهید. برای انجام این کار، باید یک خط کد از اسناد وارد کنید، با این حال، یک شرط باید رعایت شود. همه می دانند که JS یک زبان برنامه نویسی است که تمام دستورات را به ترتیب اجرا می کند، بنابراین در این صورت باید این خط کد را بعد از خطی که کتابخانه jQuery را به سند خود اضافه می کند، اضافه کنید. بیشتر با JS در مورد این نوار لغزنده، شما کاری نداریدنیاز است.
کدینگ HTML
خب، شما نوار لغزنده را وصل کرده اید، اکنون زمان طراحی و سفارشی کردن آن است. اول از همه، باید کد HTML را بنویسید تا اسلایدر اصلاً در صفحه شما ظاهر شود. برای انجام این کار، باید ظرفی بسازید که حاوی اسلایدها باشد. این کار را می توان با استفاده از تگ div انجام داد، که باید به کلاس owl-carousel اختصاص داده شود. این کلاس است که تضمین می کند که تمام سبک های مربوط به اسلایدر فعال می شوند. همچنین می توانید کلاس دیگری بنویسید - موضوع جغد. اگر تصمیم بگیرید از طرح پیش فرض استفاده کنید یا نسخه استاندارد نوار لغزنده را به عنوان مبنایی برای کار بیشتر در نظر بگیرید، مفید خواهد بود.
سپس باید هر اسلاید را در یک ظرف جداگانه با تگ div اضافه کنید. البته می‌توانید از تگ‌های دیگر استفاده کنید، اما این تگ برای اسلایدرها بهترین است.
افزونه تماس
و آخرین کاری که برای داشتن یک اسلایدر آماده در سایت خود باید انجام دهید این است که از این بلوک کد استفاده کنید:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
تضمین می کند که نوار لغزنده شروع به کار می کند، یعنی زمانی که صفحه شما بارگیری می شود، در محتوا حرکت کنید. با همین کد می توانید Owl Carousel را به وردپرس متصل کنید. تنظیمات این افزونه متعدد و متنوع است و اکنون با کلیدی ترین نکات آشنا خواهید شد.
تنظیم ظاهر و عملکرد نوار لغزنده
بنابراین از چه دستوراتی می توانید برای سفارشی کردن نوار لغزنده خود استفاده کنید؟ ابتدا باید دستور آیتم ها را به خاطر بسپارید، زیرا با آن می توانید تعداد مشخصی اسلاید را در اسلایدر خود تنظیم کنید. فرمان حلقه به شما این امکان را می دهد که انتخاب کنید که آیا نوار لغزنده را حلقه کنید یا در آخرین عنصر اسکرول را متوقف کنید. دستور Drag نیز وجود دارد که دارای چندین گزینه مانند ماوس و لمس است. در حالت اول می توانید آن را طوری بسازید که عناصر اسلایدر شما با پایین نگه داشتن ماوس و در حالت دوم به کمک لمس (این دستور برای دستگاه های موبایل مناسب است). دستور مهم دیگر nav است که نمایش فلش های ناوبری را فعال می کند. همراه با آن، می توانید از دستور navText برای اضافه کردن برچسب به دکمه های ناوبری استفاده کنید. همچنین، نباید دستور پخش خودکار را فراموش کنید، که به شما امکان می دهد شروع خودکار چرخاندن اسلایدهای اسلایدر خود را هنگام بارگیری صفحه فعال و غیرفعال کنید. با این دستور می توانید از autoplayTimeout نیز استفاده کنید که می توانید مقدار خاصی را بر حسب میلی ثانیه تعیین کنید که زمان بین چرخش خودکار هر یک از اسلایدها را مشخص می کند.
اگر از طراحی وب ریسپانسیو استفاده می کنید، یعنی طراحی صفحه شما به طور خودکار بسته به دستگاهی که در آن مشاهده می شود تغییر می کند، قطعاً باید دستور واکنش گرا را به خاطر بسپارید که به شما امکان می دهد تعداد اسلایدها را تنظیم کنید. برای نمایش بسته به عرض صفحه ای که صفحه در آن مشاهده می شود.
