يمكنك إنشاء سلايدر (شريط التمرير) باستخدام 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.
تطوير التطبيقات والبرمجة تعتبر مجالاً شديد الطلب في سوق العمل الحر، واختيار التقنية التي ستستخدمها يعتمد على عدة عوامل بما في ذلك تفضيلات العميل ومجال التطبيق. كما أن لكل مجال سوقه الخاص ويكثر أو يقل الطلب في المجال حسب إحتاجات العملاء لذلك لا يمكن تحديد بالدقة أكثر المجالات طلباً ولكن أرى أنها مطلوبة في السوق العمل حر جميعها.
تطبيقات الأندرويد بلغة جافا أو كوتلن:-
تطبيقات iOS بلغة Swift:-
تطبيقات الأندرويد و iOS بلغة دارت وإطار العمل فلاتر:-
تقنيات Cross-Platform:-
FullStack:-