يعد إنشاء شريط تمرير صورة مهمًا جدًا في المواقع التي تحتوي على الصور التي يجب عرضها للزائرين، باستخدام جافا سكريبت و(HTML) و(CSS)، يمكنك إنشاء شريط تمرير صورة بسيط للغاية باستخدام التعليمات البرمجية.
كيفية إنشاء شريط تمرير صورة
لإنشاء شريط تمرير صورة، تحتاج أولاً إلى إنشاء ملف (HTML و CSS)، ثم أرفق ملف (CSS) هذا بملف (html)-[<link rel=”stylesheet” href=”css.css”>]، وهذه خطوات الإنشاء:
1. إنشاء التخطيط الأساسي لشريط تمرير الصورة
انسخ كود برمجة (HTML) أدناه ثم ألصقه في ملف (HTML):
<div class=”carousel-container”>
<!–Add Add Preview and Next buttons–>
<!–Add Image–>
</div>
أدناه لقد استخدمت العرض: (600) بكسل والارتفاع (400) بكسل، إذا كنت تريد زيادة حجم شريط التمرير هذا أو إنقاصه، فيمكنك زيادة هذا المقدار أو إنقاصه:
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
2. إضافة الزرين السابق والتالي
<div class=”navigation”>
<div class=”prev nav-btn”><</div>
<div class=”next nav-btn”>></div>
</div>
3. إضافة الصور والنصوص المطلوبة
تتم إضافة الصور باستخدام شريط تمرير الصور باستخدام كود (HTML) أدناه وأضف قدرًا من الوصف معها، هناك أوصاف مختلفة لكل صورة، سيتغير الوصف كلما قمت بتغيير الصور:
<div class=”carousel”>
<div class=”item main”>
<img src=”https://wallpapercave.com/wp/wp3473585.jpg” alt=”mountain” />
<div class=”caption”>Image 1</div>
</div>
<div class=”item”>
<img src=”https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg” alt=”beach” />
<div class=”caption”>Image 2</div>
</div>
<div class=”item”>
<img src=”https://i.ytimg.com/vi/-3N6fCzgXuc/maxresdefault.jpg” alt=”cityscape” />
<div class=”caption”>Image 3</div>
</div>
</div>
4. تنشيط الزرين باستخدام كود جافا سكريبت
حتى الآن قمنا بتصميم شريط التمرير هذا فقط، والآن سنقوم بتنشيط الأزرار، بعد تفعيل الزر يمكننا تغيير الصور، تحتاج إلى معرفة كود برمجة جافا سكريبت الأساسي:
const prev = document.querySelector(‘.prev’);
const next = document.querySelector(‘.next’);
const images = document.querySelector(‘.carousel’).children;
const totalImages = images.length;
let index = 0;
prev.addEventListener(‘click’, () => {
nextImage(‘next’);
})
next.addEventListener(‘click’, () => {
nextImage(‘prev’);
})
function nextImage(direction) {
if(direction == ‘next’) {
index++;
if(index == totalImages) {
index = 0;
}
} else {
if(index == 0) {
index = totalImages – 1;
} else {
index–;
}
}
for(let i = 0; i < images.length; i++) {
images[i].classList.remove(‘main’);
}
images[index].classList.add(‘main’);
}
