يرغب العديد من الأشخاص في موقعهم في رؤية أشرطة التمرير - وهي كتل تعرض أحد عناصر المحتوى على الشاشة ، وبعد فترة زمنية معينة قم بتغيير هذا المحتوى إلى آخر. بطبيعة الحال ، يستطيع كل مطور ويب إنشاء شريط تمرير بشكل مستقل باستخدام HTML و CSS و JavaScript ، ولكن هذا ليس منطقيًا دائمًا. سوف تقضي الكثير من الوقت ، على الرغم من حقيقة أن هناك عددًا لا بأس به من الحلول الجاهزة على الإنترنت والتي تجعل حياتك أسهل بكثير وتجعل موقعك أكثر جاذبية. ستركز هذه المقالة على أحد هذه الحلول المسمى Owl Carousel. يعد إعداد شريط التمرير هذا أمرًا بسيطًا للغاية ، بحيث يمكن حتى للمبتدئين التعامل معه. ستتعلم الآن ما هو شريط التمرير هذا ، بالإضافة إلى تفاصيل مهمة أخرى. إعداد Owl Carousel هو عملية خطوة بخطوة ، لذا يجب دراسة هذه المادة بالترتيب فقط.
ما هو ولماذا تختار شريط التمرير هذا بالتحديد؟
Owl Carousel ، الذي سيتم مناقشة تكوينه في هذه المقالة ، هو مكون إضافي فعال للغاية يضيف شريط تمرير جميل ومريح إلى صفحتك ، مما يسهل عملك بشكل كبير على الموقع ،توفير الكثير من الوقت والجهد والمال. ما هي مزايا هذا البرنامج المساعد المحدد ، نظرًا لوجود عدد كبير جدًا من أشرطة التمرير على الويب؟ الحقيقة هي أن شريط التمرير هذا يوفر لك العشرات من خيارات التخصيص ، والتي ستتيح لك جعل صفحتك فريدة ولا تُضاهى. إنه مكون إضافي سريع الاستجابة سيعمل على جميع إصدارات المتصفح ويمكن توصيله بسهولة بـ WordPress وأنظمة إدارة المحتوى الشائعة الأخرى. بشكل عام ، يتمتع شريط التمرير هذا بالعديد من المزايا ، لذا يجب عليك بالتأكيد الاختيار لصالحه. ومع ذلك ، قبل البدء في إعداد Owl Carousel ، لا يزال هذا المكون الإضافي بحاجة إلى التحميل.
تحميل
إعداد Owl Carousel 2 غير ممكن إذا لم تقم بتنزيله على جهاز الكمبيوتر الخاص بك ، وبما أن هذه إرشادات خطوة بخطوة ، يجب أن تبدأ من البداية. لذلك ، يمكن تنزيل البرنامج باستخدام مديري الحزم ، ولكن هذه أدوات مطور متقدمة ، لذلك سنخبرك هنا بكيفية الحصول على هذا المكون الإضافي بالطريقة القياسية. تحتاج إلى الانتقال إلى الموقع الرسمي للمكوِّن الإضافي وتنزيل أحدث إصدار له. بعد ذلك ، يجب نقل جميع الملفات التي تم تنزيلها إلى دليل موقعك ، بعد إعداد مجلد مناسب ، يسمى نفس المكون الإضافي نفسه. لاحظ أن هذا المكون الإضافي مرفق مع jQuery ، لذلك يجب أن تكون هذه المكتبة متاحة أيضًا. حسنًا ، بمجرد تنزيل هذا المكون الإضافي ، ستحتاج إلى الاهتمام بالخطوة التالية وهي إعداد منزلق Owl Carousel 2.
CSS
بتظل إعدادات Owl Carousel 1.3 كما في الإصدار 2 الأحدث تقريبًا ، تتم إضافة ميزات جديدة فقط. ومع ذلك ، ستكون المعلومات الأساسية هي نفسها ، بدءًا من إضافة CSS إلى المستند الخاص بك. لذا فإن الخطوة الأولى هي إضافة الخط. ماذا تعطيك؟ هذه سلسلة تقوم بتحميل الأنماط الضرورية إلى الموقع لعرض شريط التمرير. هذا هو المكان الذي يمكنك الانتهاء منه عن طريق القيام بالمعالجة المرئية بنفسك. ومع ذلك ، هناك حل أكثر ملاءمة وأسرع. يمكنك أيضًا إضافة سطر يقوم أيضًا بتحميل المظهر الافتراضي لشريط التمرير ، مما يجعله جاهزًا للاستخدام على الفور. يمكنك تحرير بعض الأنماط لجعل شريط التمرير أكثر تميزًا واختلافًا وأكثر ملاءمة للمحتوى الخاص بك. بطبيعة الحال ، ستكون إعدادات Owl Carousel باللغة الروسية مريحة للغاية ، ولكن يجب على كل شخص ينشئ مواقع الويب أن يفهم أنه لا يمكنه الاستغناء عن معرفة اللغة الإنجليزية.
اتصال JavaSpript
بالطبع ، لن يعمل شريط التمرير بدون JS ، لذلك يجب أيضًا الحرص على تضمين الملف المناسب الذي يحتوي على الكود اللازم. للقيام بذلك ، تحتاج إلى إدخال سطر من التعليمات البرمجية من الوثائق ، ومع ذلك ، يجب استيفاء شرط واحد. يعلم الجميع أن JS هي لغة برمجة تنفذ جميع الأوامر بالترتيب ، لذلك في هذه الحالة يجب عليك إضافة هذا السطر من التعليمات البرمجية بعد السطر الذي يضيف مكتبة jQuery إلى مستندك. المزيد مع JS في حالة شريط التمرير هذا ، ليس لديك ما تفعلهحاجة
ترميز HTML
حسنًا ، لقد قمت بتوصيل شريط التمرير ، حان الوقت الآن لتصميمه وتخصيصه. بادئ ذي بدء ، تحتاج إلى كتابة كود HTML لكي يظهر شريط التمرير على صفحتك على الإطلاق. للقيام بذلك ، تحتاج إلى إنشاء حاوية تحتوي على الشرائح. يمكن القيام بذلك باستخدام علامة div ، والتي يجب تخصيصها لفئة owl-carousel. هذه هي الفئة التي تضمن تنشيط جميع الأنماط المتعلقة بشريط التمرير. يمكنك أيضًا كتابة فصل دراسي آخر - موضوع البومة. سيكون مفيدًا إذا قررت استخدام التصميم الافتراضي أو اتخاذ الإصدار القياسي من شريط التمرير كأساس لمزيد من العمل.
ثم تحتاج إلى إضافة كل شريحة في حاوية منفصلة بعلامة div. بالطبع يمكنك استخدام علامات أخرى ، لكن هذه العلامة هي الأفضل لأشرطة التمرير.
Call plugin
وآخر شيء عليك القيام به من أجل الحصول على شريط تمرير جاهز على موقعك هو استخدام كتلة الكود هذه:
$ (مستند). جاهز (الوظيفة () {
$ (". owl-carousel"). owlCarousel () ؛
}) ؛
يضمن أن يبدأ شريط التمرير في العمل ، أي التمرير عبر المحتوى عند تحميل صفحتك. باستخدام نفس الرمز ، يمكنك توصيل Owl Carousel بـ WordPress. إعدادات هذا البرنامج المساعد عديدة ومتنوعة ، والآن ستتعرف على أهم النقاط.
ضبط شكل المنزلق ووظائفه
إذن ما هي الأوامر التي يمكنك استخدامها لتخصيص شريط التمرير الخاص بك؟ بادئ ذي بدء ، تحتاج إلى تذكر أمر العناصر ، لأنه يمكنك بواسطته تعيين عدد محدد من الشرائح في شريط التمرير. سيسمح لك الأمر loop باختيار ما إذا كنت تريد تكرار شريط التمرير أو إيقاف التمرير عند العنصر الأخير. يوجد أيضًا أمر السحب ، والذي يحتوي على العديد من الخيارات ، مثل الماوس واللمس. في الحالة الأولى ، يمكنك إجراء ذلك بحيث يمكن تمرير عناصر شريط التمرير مع الضغط باستمرار على الماوس ، وفي الحالة الثانية ، بمساعدة لمسة (هذا الأمر مناسب للأجهزة المحمولة). أمر مهم آخر هو التنقل ، والذي يتيح عرض أسهم التنقل. إلى جانب ذلك ، يمكنك استخدام الأمر navText لإضافة تسميات إلى أزرار التنقل. أيضًا ، يجب ألا تنسَ أمر التشغيل التلقائي ، والذي يسمح لك بتمكين وتعطيل البدء التلقائي لقلب شرائح شريط التمرير عند تحميل الصفحة. باستخدام هذا الأمر ، يمكنك أيضًا استخدام autoplayTimeout ، حيث يمكنك تعيين قيمة محددة بالمللي ثانية ، والتي ستحدد الوقت بين التدوير التلقائي لكل شريحة.
إذا كنت تستخدم تصميم ويب سريع الاستجابة ، أي أن تصميم صفحتك يتغير تلقائيًا اعتمادًا على الجهاز الذي يتم عرضها عليه ، فأنت بالتأكيد بحاجة إلى تذكر الأمر المتجاوب ، والذي يسمح لك بتعيين عدد الشرائح للعرض اعتمادًا على عرض الشاشة التي يتم عرض الصفحة عليها.
