أداة العرض المتكرر Carousel في إطار العمل Bootstrap

أداة العرض المتكرر Carousel

أداة العرض المتكرر أو أداة عرض الصور بشكل متحرك، أو ما يدعى بأداة عرض الشرائح Slider تعتبر من الأدوات الرائعة التي يقدمها إطار العمل Bootstrap، بحيث تمكِّن المصممون من إنشاء عرض للشرائح slides بشكل رائع وبخطوات بسيطة جدا، فهيا بنا ننشئ أداة العرض المتكرر Carousel:

في البداية، لا بد من إضافة الوسم الخارجي <div> والذي سيضم عناصر الأداة كاملة، ونضيف الصنف carousel.والصنف slide. إلى هذا الوسم، ونعطيه معرِّف id فريد ونسميه على سبيل المثال firstCarousel، وهناك فترة زمنية قصيرة بين ظهور كل صورة وأخرى ونحدد هذه الفترة من خلال الخاصية data-interval="3000"– وهذه القيمة تقاس بالملي ثانية أي أن الرقم 3000 السابق عبارة عن 33 ثوانٍ فقط -،طبعا الخاصية هذه تضاف إلى الوسم السابق، ولبدء تحريك الأداة عند تحميل الصفحة نضيف الخاصية data-ride="carousel".

كما في الشيفرة التالية:

<div id="firstCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
  ...
</div>

محتويات أداة العرض المتكرر

تتكون أداة العرض المتكرر من عدة عناصر كما يلي:

• عناصر المحتوى الداخلي (الصورة والنص الذي يصف الصورة).
• عناصر تحريك المحتويات باتجاه اليمين أو اليسار.
• عناصر إعلام المستخدم بمدى تقدم الأداة carousel-indecators.

والصورة التالية توضح هذه الأجزاء:

بعد أن تم إنشاء الإطار الخارجي للأداة سننشئ الآن المكونات، وأول هذه المكونات هي المحتويات الأساسية أو الداخليةinner وأقل شيء يمكن إضافته للمحتويات هو الصورة، ولكن قبل أن نضيف الصورة سننشئ جزء المحتويات باستخدام الوسم <div> مع الصنف carousel-inner. ومن ثم ننشئ جزء مخصص لكل عنصر من المحتويات الداخلية باستخدام الصنف item. مع الوسم <div> ونضيف الصنف active. لأول عنصر ولا نضيفه مع بقية العناصر، ومن ثم نضيف الصورة باستخدام الوسم <img>، وأما النصوص التي تصف الصورة وتظهر في الجزء السفلي من الأداة فيتم أضافتها باستخدام الصنف carousel-caption. مع الوسم <div>، كما في الشيفرة التالية:

<div class="carousel-inner">
  <div class="active item">
    <img src="img/1.jpg" alt="image 1"/>
    <div class="carousel-caption">
      <h3>العمل الاول للمؤسسة</h3>
      <p>وصف للعمل الذي أعطينا صورته في الخلفية وهذا مجرد نص أمامي</p>
    </div>
  </div>
  ...

تتحرك المحتويات تلقائيا في وقت معين كما حددناه في الإطار الخارجي للأداة ولكن أذا رغبنا بإعطاء المستخدم الحرية في التنقل بين الشرائح فقد وفر إطار العمل Bootstrap3 هذه الخاصية من خلال استخدام الصنف carousel-control left. للتحريك باتجاه اليسار أو الصنف carousel-control right. للتحريك باتجاه اليمين، ونستخدم هذا الصنف مع الوسم <a>، ولابد من إضافة الخاصية data-slide="" ونضع لها القيمة إماprev للعودة إلى الشريحة السابقة أو القيمة next للتقدم إلى الشريحة التالية، ولا تنسى أن تضيف أيقونة تعبر عن الاتجاه، وذلك باستخدام الصنف .glyphicon-chevron-* مع الوسم <span>، ونستبدل الرمز * بـ left أوright حسب الاتجاه، كما في الشيفرة التالية:

<a class="carousel-control left" href="#firstCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>

<a class="carousel-control right" href="#firstCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>

ولاستكمال بقية العناصر في الصورة السابقة سنضيف المزيد من الوضوح إلى الأداة فنستخدم عنصر التنبيه لإعلام المستخدم بمدى تقدم أداة العرض وهذه الأداة مهمة خصوصا إذا كان العرض يحتوي على الكثير من المحتويات، ونضيفها باستخدام الصنف carousel-indicators. مع وسم القائمة <ol> وعلى حسب عدد مكونات الأداة نضيف عناصر <li> في هذه القائمة، وعناصر القائمة <ol> تأخذ الخاصية data-target="#carousel-id"وقيمة هذه الخاصية عبارة عن معرّف لأداة العرض المتكرر، ونضيف الخاصية data-slide-to="#" بحيث  تحتوي قيمة هذه الخاصية على رقم الشريحة الظاهرة في الوقت الحالي على الأداة ويبدأ الترقيم من الصفر صعودا إلى عدد الشرائح في الأداة. كما في المثال التالي:

<ol class="carousel-indicators">
  <li data-target="#firstCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#firstCarousel" data-slide-to="1"></li>
  <li data-target="#firstCarousel" data-slide-to="2"></li>
</ol>

وبهذا نكون قد انتهينا من تكوين أداة عرض متكرر بسيطة، وهذه الشيفرة الكاملة للأداة والتي ستكون مخرجاتها كما في الصورة السابقة الذكر:

<div id="firstCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
  <div class="carousel-inner">
    <div class="active item">
      <img src="img/1.jpg" alt="image 1"/>
      <div class="carousel-caption">
        ...
      </div>
    </div>

    <div class="item">
      <img src="img/2.jpg" alt="image 1"/>
      <div class="carousel-caption">
        ...
      </div>
    </div>

    <div class="item">
      <img src="img/3.jpg" alt="image 1"/>
      <div class="carousel-caption">
        ...
      </div>
    </div>
  </div>

  <a class="carousel-control left" href="#firstCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>

  <a class="carousel-control right" href="#firstCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

  <ol class="carousel-indicators">
    <li data-target="#firstCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#firstCarousel" data-slide-to="1"></li>
    <li data-target="#firstCarousel" data-slide-to="2"></li>
  </ol>
</div>

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