عرض الشرائح Bootstrap 5 Carousel
-
بنتعرف في هذا الدرس شو يعني Carousel، وكيف بنعملها في Bootstrap. ويمكن تعريفها على انها عرض شرائح للمكونات الي ممكن تكون صور، نصوص، وغيرها. بشكل حركي.
نطبق مثال بسيط حتى نفهم شو يعني Carousel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid ">
<div class="container-fluid m-2" >
<h3>Carousel sample</h3>
</div>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Programming.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
</div>
<div class="carousel-item ">
<img src="DataBase.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
</div>
<div class="carousel-item">
<img src="projectManagment.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>
النتيجة:
تمام نفهم شو عملنا.
اضفنا <div> وطبقنا عليها class باسم carousel الي بيعمل على انشاء الشرائح وطبقنا كمان class باسم slide الي هو المسؤول عن التأثير والحركة. بعد هيك اضفنا الصور وكل صورة في <div> وطبقنا عليها class باسم carousel-item الي من خلالو بتم تحديد المحتوي المطلوب عرضه في الشريحه وهي هون الصورة.واول صورة طبقنا عليها class باسم active الى بيعني ان هي الصورة الي بتنعرض في البدايه.
واخر شي طبقنا button لعرض الازار للخلف والامام لتحريك الشرائح
الجدول التالي يوضح كل class وشو الاستخدام الخاص به:
| اسم Class | الوصف والوظيفة |
| .carousel | انشاء carousel |
| .carousel-indicators | يستخدم لإضافة مؤشرات carousel. وهي عبارة عن نقاط صغيرة في أسفل كل شريحة (والتي تشير إلى عدد الشرائح الموجودة في carousel والشريحة التي يشاهدها المستخدم حاليًا) |
| .carousel-inner | إضافة الشرائح الى carousel |
| .carousel-item | يحدد محتوى كل شريحه |
| .carousel-control-prev | يضيف زرًا في اليسار (previous) إلى carousel ، مما يسمح للمستخدم بالتنقل بين الشرائج للخلف |
| .carousel-control-next | يضيف زرًا في اليمين (next) إلى carousel ، مما يسمح للمستخدم بالتنقل بين الشرائج للأمام |
| .carousel-control-prev-icon | يستخدم مع. carousel-control-prev لإنشاء زر "previous" |
| .carousel-control-next-icon | يُستخدم مع carousel-control-next. لإنشاء زر "next" |
| slide. | يضيف التأثير والانتقال في CSS transition and animation وتأثير الحركة عند الانتقال من عنصر إلى العنصر التالي. اذا كان المطلوب عدم اظهار الحركة فيجب إزالة هذا class |
اضافة carousel-indicators
يستخدم لإضافة مؤشرات الى carousel. وهي عبارة عن نقاط صغيرة في أسفل كل شريحة (والتي تشير إلى عدد الشرائح الموجودة في carousel والشريحة التي يشاهدها المستخدم حاليًا). وحتي نطبق هذا الكلام بنستخدم class باسم carousel-indicators
نطبق المثال التالي حتى نفهم الموضوع:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid ">
<div class="container-fluid m-2" >
<h3>Carousel sample</h3>
</div>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Programming.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
</div>
<div class="carousel-item ">
<img src="DataBase.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
</div>
<div class="carousel-item">
<img src="projectManagment.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>
النتيجة:
نفهم شو عملنا.
اضفنا الكود التالي وطبقنا عليه class باسم carousel-indicators :
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2"></button>
</div>
وربطنا data-bs-target مع id الخاص ب <div> الرئيسي. الي هو carouselExampleControls . وبعدها اضفنا الارقام للشرائح بالتسلسل باستخدام data-bs-slide-to واول شريحة طبقنا عليها class باسم active
اكيد اذا كان ما بدك تضيف الازار الخاصة ب indicators فا الحل هو حذف الكود الخاص بذلك..
اضافة التسميات Captions الى الشرائح
يستخدم class المسمى carousel-caption. لاضافة نصوص وتسميه للشريحه. ويمكن إخفاؤها بسهولة في viewports الأصغر، وبنعمل هذا الكلام باستخدام أدوات عرض اختيارية. بتم الاخفاء باسخدام class باسم d-none. ، وتم اظهاراها مرة أخرى باستخدام class باسم d-md-block.
نطبق المثال التالي حتى نفهم الموضوع.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid ">
<div class="container-fluid m-2" >
<h3>Carousel sample</h3>
</div>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Programming.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
<div class="carousel-caption d-none d-md-block text-dark">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item ">
<img src="DataBase.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
<div class="carousel-caption d-none d-md-block text-dark">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="projectManagment.jpg" class="d-block w-100 border" style="height:50vh" alt="...">
<div class="carousel-caption d-none d-md-block text-dark">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>
النتيجة:
جرب تصغر حجم الشاشة وشوف كيف النص بختفي.
اترك تعليقك