عرض متعدد لشرائح Bootstrap Carousel

نشرت: 2016-03-17

كيف يمكنني إضافة شريط تمرير عرض شرائح متعدد في Bootstrap Carousel على صفحة واحدة أو صفحة واحدة؟

في هذا البرنامج التعليمي ، نقدم عينة من التعليمات البرمجية المصدر العاملة. أولاً ، قم بتنزيل نموذج التعليمات البرمجية باستخدام الزر Download Code الموجود أسفل الصفحة.

تعد إضافة وإنشاء شريط تمرير دائري متعدد على الصفحة أمرًا سهلاً وبسيطًا.

لذا ، لنبدأ بنموذج التعليمات البرمجية.

بعد اكتمال تنزيل شفرة المصدر ، ستحصل على ملف مضغوط "multi-bootstrap-carousels.zip". استخراج ملف مضغوط في أي مكان في نظام الكمبيوتر المحلي.

بعد الاستخراج تجد دليلًا باسم "multi-bootstrap-carousels" ، في هذا الدليل ستحصل على الأصول التالية:

  1. دليل CSS
  2. دليل الخطوط
  3. دليل الصور
  4. دليل JS
  5. دليل CSS
  6. ملف HTML - multi-bootstrap-carousels.html

ما هذه الشهادات؟

هذه الأصول مطلوبة لإنشاء تمهيد متعدد منزلقات دائرية.

  • يحتوي دليل CSS على ملف "bootstrap.min.css" يُستخدم لتصميم صفحات HTML سريعة الاستجابة.
  • يتم استخدام دليل الخطوط بواسطة bootstrap CSS لإنشاء أيقونات الرسوميات المتنوعة. تم إنشاء عنصر التحكم في التنقل في سهم شريط التمرير الدائري أيضًا بواسطة هذا. يمكنك التحقق من هنا.
  • يحتوي دليل الصور على جميع الصور التي سنستخدمها في شرائح شريط التمرير الدائري.
  • يحتوي دليل JS على ملفي js "jquery.min.js" و "bootstrap.min.js". ملف jquery.min.js عبارة عن مكتبة JavaScript الغرض من استخدام jquery لجافا سكريبت على مواقع الويب. ملف bootstrap.min.js هو ملف مكتبة bootstrap framework js الذي يستخدم لإنشاء دوارات bootstrap ونماذج النماذج وتلميحات الأدوات وعلامات التبويب وما إلى ذلك. يعتمد ملف bootstrap.min.js على ملف jquery.min.js ، تحتاج إلى تحميل أولاً قبل استخدام bootstrap js. يمكنك استكشاف المزيد حول ملف مكتبة bootstrap js هنا.
  • يحتوي ملف HTML (multi-bootstrap-carousels.html) على كل أجزاء التصميم والتعليمات البرمجية في عدة منزلقات دائرية.

دعنا نتعرف على المزيد حول ملف multi-bootstrap-carousels.html.

يجب عليك فتح ملف HTML في أي محرر تعليمات برمجية. إذا لم يكن لديك أداة محرر رمز مثبتة على الكمبيوتر ، فإليك بعض أدوات محرر التعليمات البرمجية ، قم بتنزيل وتثبيت أي أداة محرر كود:

نوت باد بلس +
قم بتنزيل EditPlus +

في قسم الرأس ، قمنا بتحميل جميع ملفات CSS & js المطلوبة وأربعة رموز JS دائرية على النحو التالي:

شفرة

 <head>
 <title> مثال على عرض شرائح دائري متعدد لشرائح Bootstrap </title>
 <meta charset = "utf-8">
 <meta name = "viewport" content = "width = device-width، initial-scale = 1">
 
 <! - مكتبة bootstrap css ->
 <link rel = "stylesheet" href = "css / bootstrap.min.css">
 
 <! - أحدث مكتبة jQuery (قم بتحميل هذه المكتبة أولاً) ->
 <script src = "js / jquery.min.js"> </script>
 
 <! - مكتبة bootstrap js ->
 <script src = "js / bootstrap.min.js"> </script>
 
 <! - دائري تخصيص كود css ->
 <ستايل>
 .carousel {
 / * يمكنك إضافة تخصيص css هنا مثل عرض ارتفاع شريط التمرير * /
 }
 </style>
 
 <! - كود carousel js ->
 <script>

 / * أول عرض شرائح دائري * /
 $ ('# carousel-1'). دائري ({
      // مقدار الوقت للتأخير بين شريحة ركوب الدراجات ، إذا كانت خاطئة ، فلا توجد دورة
      الفاصل الزمني: 500 ،

      // يوقف الشريحة عند دخول الماوس ويستأنف على mouseleave.
      وقفة: "تحوم" ،

      // ما إذا كان يجب أن يدور الرف الدائري بشكل مستمر أو يتوقف بشدة.
      التفاف: صحيح ،

      // ما إذا كان يجب أن يتفاعل الرف الدائري مع أحداث لوحة المفاتيح.
      لوحة المفاتيح: صحيح
 }) ؛
 
 
 / * عرض الشرائح الدائري الثاني * /
 $ ('# carousel-2'). دائري ({
      الفاصل الزمني: 1000 ،
      التفاف: صحيح ،
      لوحة المفاتيح: صحيح
 }) ؛
 
 
 / * عرض الشرائح الدائري الثالث * /
 $ ('# carousel-3'). دائري ({
     الفاصل الزمني: 2000 ،
     التفاف: صحيح ،
     لوحة المفاتيح: صحيح
 }) ؛
 
 
 / * عرض الشرائح الدائري الأمامي * /
 $ ('# carousel-4'). دائري ({
     الفاصل الزمني: 3000 ،
     التفاف: صحيح ،
     لوحة المفاتيح: صحيح
 }) ؛
 </script>
 </head>

في قسم النص ، نحدد رمز HTML الدائري. الآن ، شرح عمل أول رمز شريط التمرير. لقد قسمنا فئة الصف div إلى عمودين باستخدام فئة col-md-6. وفي العمود الأول ، أضفنا كود HTML لأول شريط تمرير دائري كما هو موضح أدناه.

 <div class = "row">
 <! -------------- بداية العمود الأول -------------->
 <div class = "col-md-6">
  <div class = "jumbotron">
   <center> <h3> حلقة دوارة واحدة </ h3> </center>
   <! -------------- أول عرض شرائح دائري يبدأ -------------->
   <div class = "carousel slide" data-ride = "carousel">
   <! - الشرائح النقطية ->
   <ol class = "carousel-sources">
    <li data-target = "# carousel-1" data-slide-to = "0" class = "active"> </li>
    <li data-target = "# carousel-1" data-slide-to = "1"> </li>
    <li data-target = "# carousel-1" data-slide-to = "2"> </li>
   </ol>

   <! - غلاف الشرائح ->
   <div class = "carousel-inner" role = "listbox">
    
    <! - الشرائح 1 ->
    <div class = "item active">
     <img src = "images / girl-1.jpg" alt = "خانيا">
    </div>
 
    <! - الشرائح 2 ->
    <div class = "item">
     <img src = "images / girl-2.jpg" alt = "خانيا">
    </div>
 
    <! - الشرائح 3 ->
    <div class = "item">
     <img src = "images / girl-3.jpg" alt = "زهرة">
    </div>

   </div>

   <! - أسهم التحكم في الشرائح اليمنى واليسرى ->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class = "glyphicon glyphicon-chevron-left" aria-hidden = "true"> </span>
    <span class = "sr-only"> السابق </ span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class = "glyphicon glyphicon-chevron-right" aria-hidden = "true"> </span>
    <span class = "sr-only"> التالي </ span>
   </a>
  </div>
  <! -------------- نهاية عرض الشرائح الدائري الأول -------------->
  </div>
 </div>
 <! -------------- نهاية العمود الأول -------------->
</row>

هناك ثلاثة أجزاء من شريط التمرير الدائري في كود HTML أعلاه

  • الرصاص المنزلق
  • شرائح الصورة
  • التنقل المنزلق

قسم Slider Bullets يتم إنشاؤه باستخدام علامة قائمة ترتيب HTML. يستخدم <ol> فئة تسمى مؤشرات carousel ، والتي يتم تعريفها في ملف bootstrap CSS. وتحتوي كل علامة <li> على سمة data-target = ”# carousel-1 حيث يمثل # carousel-1 المعرف نفسه الذي نستخدمه في أول كود دائري js في رمز المثال.

يحتوي قسم شرائح صورة المنزلق على div مع عنصر فئة. في كل من div هذا ، أضفنا علامة صورة لتحميل صورة شريحة.

يستخدم شريط التمرير للتنقل بين شرائح الصور في الاتجاه الأيسر أو الأيمن. يتم إنشاء أسهم التنقل بواسطة رموز رسوم تمهيدية تسمى Glyphicon . يتم تغليف أزرار التنقل في علامة <a> مرساة مع وظيفة سمة بيانات دائري التمهيد وفئة التحكم في الرف الدائري . في <a> العلامة إلى سمة href ، أضفنا نفس المعرف ( # carousel-1 ) كما أضفنا من قبل إلى جزء الرموز النقطية في شريط التمرير. يتم استخدام هذا المعرف في أول كود js لعرض الشرائح الدائري لتنشيط وظيفة شريط التمرير الأول في كود HTML الأول لشريط التمرير.

في رمز شريط التمرير الثاني الخاص بنا ، قمنا بتعيين معرف آخر # carousel-2 لجميع الأجزاء الثلاثة من رمز شريط التمرير مثل رمز js المنزلق الثاني ، والرموز النقطية المنزلق الثاني ، ورمز HTML للتنقل.

تنزيل رمز المثال

أمل! أنتم تجدون أن البرنامج التعليمي ومثال الكود وصفي ويعمل من أجلكم. لقد علقنا على كل قسم من الكود في المثال ، حتى تتمكن من فهم كل رمز بسهولة.

أيها الرجال إذا كان لديك اقتراح بخصوص لغة البرنامج التعليمي وكود المثال القابل للتنزيل ، فيرجى الكتابة إلينا على بريدنا. عنوان بريدنا الإلكتروني هو awordpresslife {at} gmail {dot} com

بفضل قراءة واستخدام ودعم هذا البرنامج التعليمي.

ابحث عن روابط المراجع المفيدة أدناه التي بحثنا عنها لكتابة هذا البرنامج التعليمي لك:

احصل على Bootstrap
مسج
W3Schools