0

كيف انشأ سلايدر بواسطة جافا سكربت؟

ارجو الرد إن أمكن باكثر من طريقة .


0
osama_ziyadah أضف ردا

يمكنك إنشاء سلايدر (شريط التمرير) باستخدام 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.

0
Alasdee_Ali أضف ردا

افضل استخدام جافا سكربت خالصة من غير مكتبات لاني في فترة التعلم ولست بصدد استخدام مكتبات.

شكرا