ارجو الرد إن أمكن باكثر من طريقة .
كيف انشأ سلايدر بواسطة جافا سكربت؟
يمكنك إنشاء سلايدر (شريط التمرير) باستخدام JavaScript و HTML و CSS. سأقدم لك مثالًا بسيطًا حول كيفية إنشاء سلايدر باستخدام مكتبة JavaScript المعروفة باسم "slick slider". يمكنك تنزيل هذه المكتبة أو استخدام روابط CDN لتضمينها في مشروعك.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
</head>
<body>
<div class="slider">
<div><img src="image1.jpg" alt="Slide 1"></div>
<div><img src="image2.jpg" alt="Slide 2"></div>
<div><img src="image3.jpg" alt="Slide 3"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').slick({
autoplay: true,
autoplaySpeed: 2000, // التأخير بين الشرائح بالميللي ثانية
dots: true, // إظهار نقاط التنقل
});
});
</script>
</body>
</html>
في هذا المثال، قمنا بتضمين مكتبة Slick Slider و jQuery باستخدام روابط CDN في الجزء العلوي من ملف HTML. قمنا بإنشاء عنصر div بفئة slider حيث ستتم عرض الشرائح.في الجزء السفلي من الملف HTML، قمنا بتهيئة السلايدر باستخدام JavaScript. تم تمكين خاصية الـ autoplay لتشغيل السلايدر تلقائياً مع تحديد سرعة الانتقال بين الشرائح. وتم أيضاً تفعيل خاصية النقاط (dots) للملاحة بين الشرائح.
يمكنك تخصيص السلايدر وفقاً لاحتياجاتك الخاصة باستخدام خصائص وخيارات مكتبة Slick Slider.
افضل استخدام جافا سكربت خالصة من غير مكتبات لاني في فترة التعلم ولست بصدد استخدام مكتبات.
شكرا
التعليقات