كيفية تصميم سلايدر باستخدام HTML CSS & jQuery

ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط تمرير دائري على شكل بومة متجاوب باستخدام HTML CSS & jQuery

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط تمرير دائري على شكل بومة متجاوب باستخدام HTML CSS & jQuery.

 

OWL Carousel عبارة عن مكون إضافي jQuery يعمل باللمس يسمح لك بإنشاء منزلقات دائرية سريعة الاستجابة. الدوارة عبارة عن مزيج من اللافتات الدوارة أو عرض الشرائح الذي يتم وصفه على الصفحة الرئيسية لمتجرك. يتيح لك عرض ما يصل إلى خمس شرائح تتكون من صور ونصوص ، والتي يمكن ربطها بمنتجات أو صفحات معينة.

 

في هذا البرنامج (Respire Owl-carousel Slider) ، على صفحة الويب ، تظهر ثلاث بطاقات فقط من بين خمس بطاقات ذات لون خلفية مختلف وتنزلق هذه البطاقات تلقائيًا بعد كل ثانيتين. هناك أيضًا أزرار تحكم أو تنقل لتمرير البطاقات يدويًا. هذا التصميم يستجيب بشكل كامل لأي جهاز وفي الأجهزة اللوحية تظهر بطاقتان بثلاثة أزرار تحكم وفي الأجهزة المحمولة تظهر بطاقة واحدة بها خمسة أزرار تحكم.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة مقطع فيديو تعليمي كامل على هذا البرنامج (Respire Owl-carousel Slider).

 

في الفيديو ، شاهدت المتزلج المتجاوب Owl-carousel Slider وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. هذه أشرطة التمرير بسيطة وسهلة الإنشاء بسبب المكون الإضافي Owl-carousel jQuery. يمكننا أيضًا إنشاء هذا البرنامج باستخدام JavaScript خالص ولكن في javascript ، نحتاج إلى المزيد من التعليمات البرمجية مقارنة باستخدام مكون إضافي.

 

إذا كنت تحب هذا البرنامج (Respire Owl-carousel Slider) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام شريط التمرير الدائري المصمم مسبقًا هذا على صفحات HTML ومشاريعك ومواقع الويب الخاصة بك.

 

متزلج مستجيب البومة دائري

لإنشاء هذا البرنامج (متسلق البومة الدائري المتجاوب). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow