كيفية تغيير سرعة انتقال شريط Bootstrap (الفاصل الزمني)

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

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

لا حاجة لتعديل ملفات Bootstrap الأساسية. يكفي إجراء التعديلات داخل HTML وCSS لديك.

إعداد الفاصل الزمني لشريط Bootstrap

هذا هو المقتطف الافتراضي للشريط:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"> <img src="img_chania.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div>
    <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div>
  </div>
  
  <!-- Left and right controls --> 
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> 
</div>
  

إضافة الخاصية data-interval

لتحديد مدة بقاء كل شريحة، أضف data-interval إلى الغلاف:

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

• 1000 = ثانية واحدة
• 3000 = ثلاث ثوانٍ
• استبدل 3000 بالقيمة المناسبة لك.

هذه أبسط طريقة للتحكم في سرعة الشريط على المواقع المتجاوبة.

تغيير مدة الحركة عبر CSS

يتحكم الفاصل الزمني في مدة عرض الشريحة، لكن يمكنك أيضًا
تخصيص تأثير الحركة. بشكل افتراضي، يستخدم Bootstrap مدة انتقال 0.6 ثانية.
للحصول على تلاشي أو انزلاق أبطأ، زد الوقت في ملف CSS الخاص بك.

.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.2s ease-in-out !important;
    -o-transition: -o-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
}
  

هنا قمنا بضبط المدة إلى 1.2 ثانية. غيّر القيمة حسب التأثير الذي تريده.

لماذا نضبط السرعة؟

• تجربة المستخدم: شرائح أطول للسرد أو إبراز المنتجات.
• التجارة الإلكترونية: شرائح أسرع لتصفح الصور.
• SEO والتفاعل: التفاعلات السلسة غالبًا ما تزيد مدة البقاء.
• قوالب ووردبريس: العديد منها يعتمد على Bootstrap؛ نفس الإعدادات تنطبق.

خلاصة

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