تطهير
إنشاء شريط التمرير باستخدام Bootstrap. كيفية إنشاء شريط تمرير التمهيد الخاص بك في بضع خطوات سهلة Respive carousel for bootstrap 3

إنشاء شريط التمرير باستخدام Bootstrap. كيفية إنشاء شريط تمرير التمهيد الخاص بك في بضع خطوات سهلة Respive carousel for bootstrap 3

يعد Twitter Bootstrap 3 أحد أفضل أطر عمل CSS لتطوير أنظمة إدارة المحتوى وصيانتها. باستخدام Bootstrap ، يمكنك بسهولة إنشاء مدونات أو محافظ باستخدام نظام شبكة Twitter Bootstrap (تخطيط الشبكة). في قلب العديد من أنظمة CMS ، عادة ما يكون لدينا مكون أساسي يسمى "Slider" (Carousel) ، وهو في الأساس عرض متسلسل تلقائي للصور ، ولكن يمكنه أيضًا عرض أحدث المشاريع المكتملة ، وشهادات من عملائك ، ووصف خاص عروض أو روابط لأخبار أو مقالات حديثة من المدونة. في هذه المقالة ، سننظر في كيفية إنشاء شريط تمرير باستخدام مكون Carousel في Twitter Bootstrap 3.

مقدمة إلى Bootstrap 3 Carousel Twitter Component

يبدو ترميز مكوِّن الرف الدائري على النحو التالي:

>
>

...
>
>
...
>

>
>

>
>
>

من الكود أعلاه ، يمكننا أن نرى أن شريط التمرير Bootstrap 3 مقسم إلى عدة أجزاء:

المؤشرات
محتوى المنزلق
ضوابط

لتحويل عنصر شعبةفي شريط التمرير ، نضيف أسماء الفئات: دائريو الانزلاق. فصل دائرييُنشئ تأثيرًا "دائريًا" ، أي يغير الشرائح في دائرة. فصل الانزلاقيضيف رسم متحرك منزلق من الجانب الأيمن أو الأيسر. المؤشرات هي الدوائر الصغيرة الموجودة أسفل شريط التمرير ، وهي تشير إلى الموضع الحالي للشريحة وعدد الشرائح. يتم إنشاء المؤشرات باستخدام قائمة مرتبة.

>
>

تحتوي القائمة المرتبة على فئة مؤشرات دائريةالذي يحول العناصر التابعة إلى دوائر صغيرة. كل عنصر لييجب أن يكون له سمة هدف البياناتمع معرف الحاوية الأصلية. يجب أن تحتوي أيضًا على السمة شريحة البيانات إلىبقيمة رقمية فريدة ، للإشارة إلى شريحة معينة ، يجب أن تبدأ القيم بـ "0".

...
>
>
...
>

كل عنصر مع فئة العنصريتكون من قسمين فرعيين: صورةو دائري التسمية التوضيحية. تُستخدم الصورة كخلفية للشريحة. عنصر مع فئة دائري التسمية التوضيحيةيوضع فوق الصورة ويستخدم كعنوان للشريحة. داخل دائري التسمية التوضيحية، يمكننا أن نضيف

أو العلامات ، أو حتى كليهما.

يتم التحكم بواسطة السهمين الأيمن والأيسر ، حيث يتم استخدامهما لتغيير الشرائح يدويًا.

"glyphicon glyphicon-chevron-left"> >
>

"glyphicon glyphicon-chevron-right"> >
>
>

يجب أن يكون هناك عنصرين: واحد لكل اتجاه. سيكون العنصر الأول يولدعنصر مع فئات glyphicon glyphicon-chevron-left، وهو رمز السهم الأيسر وسيحتوي العنصر الثاني على الفئات glyphicon glyphicon-chevron-right، إنه سهم لليمين. في Bootstrap ، يمكننا استخدام الخطوط بدلاً من الصور لعرض الرموز.

هذا كل شئ! لقد نجحت في إنشاء شريط تمرير لموقع الويب الخاص بك. أيضًا ، لم تكتب سطرًا واحدًا من كود JavaScript ، لكن bootstrap.js فعل كل شيء من أجلك.

إعدادات المكتبة

لتخصيص شريط التمرير بشكل أكبر ، يمكنك إضافة العديد من السمات بيانات-*للحاوية الرئيسية للرف الدائري.

"فاصل البيانات"لتحديد الفاصل الزمني بين تبديل الشرائح. يأخذ قيمة رقمية ، ويجب أن يكون الرقم بالمللي ثانية.
"وقفة البيانات"يستخدم لتحديد وقت تشغيل حدث الإيقاف المؤقت. على سبيل المثال ، عندما يكون مساويًا لـ" يحوم"، يتوقف تبديل الشرائح عندما يكون الماوس فوق شريط التمرير.
"التفاف البيانات"هي سمة منطقية وتسمح لك بتعيين ما إذا كان سيتم استئناف تبديل الشرائح إذا تم الوصول إلى نهاية قائمة الشرائح.

التخصيص مع jQuery

إذا كنت ترغب في استخدام سمات jQuery و data- * ، فإن Bootstrap يسمح بالتهيئة باستخدام JavaScript. للقيام بذلك ، يمكنك كتابة الكود التالي:

$ (". carousel") .carousel ()؛

يمكن ضبط إعدادات الرف الدائري باستخدام الخيارات. فمثلا:

$ (". carousel")
الفاصل الزمني: 2000
وقفة: "تحوم" ،
التفاف: صحيح
} ) ;

يمكنك أيضًا تشغيل أحداث شريط التمرير يدويًا باستخدام الكود التالي:

. carousel ("pause") // pause
.carousel ("دورة") // تمكين الشرائح
. carousel (3) // إظهار الشريحة الرابعة
.carousel ("prev") // إظهار الشريحة السابقة
. carousel ("next") // إظهار الشريحة التالية

يمكن استدعاء الطرق المذكورة أعلاه من أي كود JavaScript للتحكم في التشغيل العادي لشريط التمرير. أجد الطرق السابقة والتالية مفيدة جدًا إذا كنت أرغب في إظهار الأزرار الخاصة بي بدلاً من الأسهم القياسية. خاصة عندما تكون خارج تخطيط الرف الدائري.

استنتاج

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

إذا كان لديك أي أسئلة ، يرجى استخدام

مكون عرض الشرائح لعناصر التدوير - عرض دائري للصورة أو شرائح نصية.

كيف تعمل

Carousel عبارة عن عرض شرائح لعرض سلسلة من المحتوى بناءً على تحويلات CSS ثلاثية الأبعاد وبعض JS. إنه يعمل مع النصوص أو الصور أو العلامات العادية. كما أنه يدعم الأزرار التالية / السابقة.

مثال

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

أعط معرفًا فريدًا لفئة carousel. لتحقيق المرونة ، خاصة إذا كنت تستخدم الكثير من الرف الدائري على الصفحة.

الشرائح فقط

فيما يلي مثال على دائرة بها شرائح فقط. لاحظ وجود فئتي .d-block و .img-fluid في الصور الدائرية - والغرض منها هو منع المتصفح من ضبط محاذاة الصورة بشكل افتراضي.

مع الضوابط

يضيف الأزرار السابقة / التالية:

مع المؤشرات

يمكنك أيضًا إضافة مؤشرات إلى الرف الدائري مع عناصر التحكم.

يتطلب العنصر النشط الأولي

يجب إضافة فئة .active إلى إحدى الشرائح ، وإلا فلن تكون المكتبة الدائرية مرئية.

مع النقوش

أضف تسميات توضيحية إلى الشرائح عن طريق إضافة عنصر فئة carousel-caption إلى أي عنصر دائري لفئة عنصر carousel. من السهل إخفاء الملصقات على الأجهزة الأصغر باستخدام أدوات العرض المساعدة. يتم إخفاؤها في البداية باستخدام فئة .d-none وعرضها مرة أخرى على الأجهزة المتوسطة بفئة .d-md-block.

تسمية الشريحة الأولى

Nulla vitae elit libero ، pharetra augue mollis interdum.

تسمية الشريحة الثانية

Lorem ipsum dolor sit amet، consectetur adipiscing elit.

تسمية الشريحة الثالثة

عرض السلع الرئيسية ، أو المستشارة النهائية.

"carousel-caption d-none d-md-block">

...

إستعمال

من خلال الصفات

تأخذ سمة شريحة البيانات القيم السابقة أو التالية ، والتي تغير موضع الشريحة بالنسبة إلى موضعها الحالي. أو استخدم data-slide-to للانتقال إلى الشريحة في الفهرس ، مثل 2: data-slide-to = "2" ، فهارس الشرائح تبدأ من 0.

يتم استخدام سمة data-ride = "carousel" لإنشاء حركة دائرية. لا يمكن دمجه مع التهيئة الصريحة للرف الدائري عبر JavaScript.

عبر JavaScript

اتصل بالمنصة يدويًا:

$ (". carousel"). دائري ()

خيارات

يمكن تمرير المعلمات من خلال السمات أو JavaScript. لاستخدام السمات ، أضف اسم المعلمة إلى data- ، على سبيل المثال: data-period = "".

اسم	نوع من	بشكل افتراضي	وصف
فترة	رقم	5000	وقت التأخير بين تغييرات الشرائح التلقائية. إذا كانت القيمة خاطئة ، فلن يغير الرف الدائري الشرائح تلقائيًا.
لوحة المفاتيح	قيمة منطقية	حقيقي	ما إذا كان الرف الدائري سيستجيب لأحداث لوحة المفاتيح أم لا.
وقفة	سلسلة \| قيمة منطقية	يحوم	إذا تم تعيين "hover" ، فسيتم إبطاء تغيير الشريحة عن طريق Mouseenter ، ويبدأ التغيير بواسطة mouseleave. إذا كانت القيمة خاطئة ، فلن يؤدي التمرير فوق الرف الدائري إلى منع الشرائح من التغيير. الأجهزة التي يتم تنشيطها باللمس: "التمرير" - توقف مؤقتًا عند اللمس (عندما ينتهي المستخدم من التفاعل مع الرف الدائري) لفترتين ، ثم قم بتغيير الشرائح مرة أخرى. لاحظ أن هذا السلوك يضاف إلى سلوك الماوس الموضح أعلاه.
اركب	خط	خاطئة	شرائح دائرية التغيير التلقائي بعد التغيير اليدوي الأول للشريحة بواسطة المستخدم. إذا كانت المكتبة - يتم تمكين التغيير التلقائي بعد التحميل.
طَوّق	قيمة منطقية	حقيقي	ما إذا كان يجب تغيير الرف الدائري بسلاسة أو بشكل منفصل.

طُرق

الطرق غير المتزامنة والانتقالات

جميع طرق API غير متزامنوإطلاق انتقال. يتم إعادتهم إلى الوظيفة التي استدعتهم عندما يبدأ الانتقال ، ولكن إلى النهاية. بالإضافة إلى ذلك ، استدعاء طريقة على أحد المكونات ، سيتم تجاهل تنفيذ النقل.

.carousel (خيارات)

يقوم بتهيئة كائن الرف الدائري بالخيارات المحددة ويبدأ انتقال الشريحة.

$ (". carousel"). دائري ((الفاصل الزمني: 2000))

.carousel ("دورة")

يغير الشرائح من اليسار إلى اليمين.

.carousel ("إيقاف مؤقت")

يوقف انتقال الشريحة.

.carousel (رقم)

ينتقل التمرير إلى نقطة معينة (على أساس 0 ، على غرار الصفوف).

.carousel ("prev")

للتمرير إلى الشريحة السابقة. تُرجع قيمة استدعاء الوظيفة قبل ظهور عنصر "الهدف"(أي قبل حرائق حدث slid.bs.carousel).

.carousel ("التالي")

إلى الشريحة التالية. تُرجع قيمة استدعاء الوظيفة قبل ظهور عنصر "الهدف"(أي قبل حرائق حدث slid.bs.carousel).

.carousel ("التخلص")

يؤدي إلى إتلاف مكتبة العنصر.

التطورات

يحتوي العرض الدائري في Bootstrap على حدثين لتطبيق الوظيفة. كلا الحدثين لهما الخصائص الإضافية التالية:

الاتجاه: الاتجاه الذي تتحرك فيه الشرائح ("يسار" أو "يمين").
relatedTarget: عنصر DOM الذي ينتقل إلى موضع الشريحة "المنبثقة".
from: فهرس الشريحة الحالية
إلى: فهرس الشريحة التالية

يتم تشغيل جميع أحداث الرف الدائري مباشرةً على الرف الدائري (أي في

$ ("# myCarousel"). على ("slide.bs.carousel" ، الوظيفة () (// افعل شيئًا ...))

يوم جيد لكل من يريد تعلم شيء جديد من عناصر إطار عمل Bootstrap. موضوع اليوم هو شريط تمرير Bootstrap Carousel. هذا عنصر شائع موجود في كل موقع ويب تقريبًا.

لذلك ، سأخبرك بكيفية إنشاء شريط تمرير دائري ، وما الأدوات المضمنة اللازمة لذلك ، وكيف يمكنك تكوين المعلمات ، وفي نهاية المقالة سأعرض تنفيذ مثال محدد. والآن نبدأ العمل!

كل شيء عن Bootstrap Carousel Plugin Tools

يتم استخدام معرض صور دائري لتقديم عروض ومنتجات جديدة وقائمة بالعروض الترويجية الحالية وعرض مناسب للمحفظة وما إلى ذلك. لذلك ، من المهم اليوم أن تكون قادرًا على العمل مع هذا المكون الإضافي اسم رسمي Bootstrap Carousel Plugin.

وتجدر الإشارة على الفور إلى أن العنصر الموصوف غير مدعوم بشكل صحيح في Internet Explorer 9 والإصدارات السابقة. ومع ذلك ، فهو يعمل بشكل رائع في (بالنسبة لـ WordPress و Joomla! والمحركات الأخرى ، فإن توصيل الإطار بسيط للغاية).

من أجل العمل بسهولة مع جميع المعلمات وتخصيص شريط التمرير بسرعة ، تحتاج إلى معرفة الفئات المضمنة الرئيسية في Bootstrap 3.

فصل	غاية
دائري	ينشئ شريط التمرير الدائري نفسه.
الانزلاق	يضيف تأثير الحركة والانتقالات باستخدام css أثناء التبديل بين الشرائح. الفصل اختياري.
مؤشرات دائرية	يضيف ، إذا جاز التعبير ، لوحة تحكم على شكل نقاط صغيرة أسفل كل صورة ، يمكنك من خلالها التبديل بسرعة إلى أي صورة. الفصل اختياري.
دائري داخلي	يضيف الشرائح نفسها إلى المعرض.
دائري التسمية التوضيحية	مسؤول عن توقيع الملفات الرسومية. يمكن تضمينها حسب الرغبة.
العنصر	يحدد مجموعة من المحتويات لكل شريحة.
التحكم في الرف الدائري الأيمن / الأيسر	يضيف الزرين الأيمن والأيسر وفقًا للاسم للتبديل بين الإطارات.

بالإضافة إلى ذلك ، يجدر معرفة الميزات الأخرى لتخطيط هذه المعارض.

بالنسبة للمبتدئين ، يتطلب إنشاء كتلة Carousel نفسها إقرارًا معرف = "myCarousel"من أجل الأداء الصحيح لهذا الأخير.

في نفس div ، تحتاج إلى تسجيل السمة ركوب البيانات = "دائري"، والذي يحدد أنه يجب تحميل الرسم المتحرك بمجرد تحميل الصفحة.

الآن دعنا ننتقل إلى المؤشرات. يجب أن تحتوي كل علامة li على سمتين: هدف البيانات، الذي يشير إلى معرف منصّة عرض بعناصر متغيّرة معيّن ، و شريحة البيانات إلى، والذي يحدد رقم الإطار الذي سيتم الانتقال إليه.

أما بالنسبة للأزرار التي تنقل الصور للأمام أو للخلف ، ولتنفيذها ، فإن الأمر يستحق تسجيل السمة شريحة البياناتبالكلمة الرئيسية إما "السابقة" أو "التالي".

أنت الآن تعرف العناصر الأساسية للإطار ، والتي بفضلها يمكنك تحرير عرض شريط التمرير بطريقة معينة. وبطبيعة الحال ، يمكنك تعطيل التمرير التلقائي للإطار أو تعليقات الصور أو الأزرار الجانبية.

آليات التحكم البديلة

بالإضافة إلى استخدام الفئات المضمنة في Bootstrap ، يمكنك أيضًا البحث عنها. لذلك ، هناك العديد من الأساليب والخيارات في JS التي تنفذ جميع الإجراءات نفسها ، فقط من خلال الأداة $ .carousel (). من بينها يمكن إدراجها مثل:

اختبار المعرفة

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

تحتاج أولاً إلى تضمين البرامج النصية والأنماط المطلوبة. أنا أفضل ، لكن يمكنك تنزيل الإطار من الموقع الرسمي ( http://getbootstrap.com/) ووضع الملفات التي تم تنزيلها في جذر دليل المشروع.

إذا كنت تتفق معي ، فإننا نكتب في رأس المستند:

1 2 3

إذا كنت مؤيدًا للطريقة الثانية ، فبدلاً من الجزء الأول من الرابط ، تحتاج إلى إدخال المسار إلى الملف.

الآن يبقى التنفيذ في شريط التمرير. للقيام بذلك ، استخدم معرفتك المكتسبة واكتب الأجزاء الضرورية من التعليمات البرمجية بالترتيب:

فتح كتلة مشتركة مسؤولة عن الأداة الموصوفة ؛
كتلة لتحديد مؤشرات التحكم ؛
منع الشرائح نفسها ؛
تنفيذ الأزرار الجانبية.

يمكن استبعاد قسمي div الثاني والأخير فقط من هذه القائمة.

أنت الآن جاهز بالتأكيد لكتابة التعليمات البرمجية.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

مثال على معرض الرف الدائري

/ * إنشاء الكتلة الرئيسية * /

/ * تعبئة الشرائح * /

مثال على معرض الرف الدائري

/ * إنشاء الكتلة الرئيسية * /

/ * أشر إلى 4 مؤشرات حسب عدد الصور * / / * املأ الشرائح * / / * إنشاء أزرار تحكم جانبية * /

مكون عرض الشرائح للتكرار خلال عناصر الصورة أو شرائح نص دائري. في المتصفحات التي تدعم واجهة برمجة تطبيقات Page Visibility ، ستتجنب الرف الدائري تبديل الشرائح عندما لا تكون صفحات الويب مرئية للمستخدم (على سبيل المثال ، عندما يكون المتصفح غير نشط ، يتم تصغير نافذة المتصفح ، وما إلى ذلك). الدوارات المتداخلة غير مدعومة.

مثال

الرسوم المتحركة غير مدعومة في Internet Explorer 9

يستخدم Bootstrap CSS3 حصريًا للرسوم المتحركة ، لكن Internet Explorer 9 لا يدعم خصائص CSS المطلوبة. لذلك ، لا توجد رسوم متحركة لانتقال الشرائح عند استخدام هذا المستعرض. لقد اخترنا عمدًا عدم تضمين العناصر الاحتياطية المستندة إلى jQuery للانتقالات.

العنصر النشط الأولي مطلوب

يجب إضافة فئة. active إلى إحدى الشرائح. خلاف ذلك ، لن تكون الدوارات مرئية.

عناوين إضافية

يمكنك بسهولة إضافة تسميات توضيحية إلى الشرائح باستخدام عنصر. carousel-caption في أي عنصر دائري. ضع حوالي HTML إضافي هناك وستتم محاذاته وتنسيقه تلقائيًا.