تبديل الصور في معرض الصور باستخدام jQuery

في السياق الحالي، يبدو أنك تقوم بتطوير معرض صور باستخدام jQuery. لكنك تواجه مشكلة عندما تكون في الصورة الأخيرة حيث لا تعمل الأسهم اليمنى واليسرى. المشكلة الأساسية هي أنه عندما تصل إلى الصورة الأخيرة وتحاول الانتقال إلى الصورة التالية، لا يتم العثور على العنصر التالي لأنه آخر عنصر في القائمة.

لحل هذه المشكلة، يمكنك إضافة بعض التحققات للتأكد من أنك لست في الصورة الأخيرة قبل تغيير الصورة. هناك عدة طرق للقيام بذلك، وإحدى الطرق هي استخدام دالة length للتحقق من وجود العنصر التالي أو السابق. إليك كيف يمكن تعديل الكود ليعمل بشكل صحيح:

javascriptCopy code
$("#right").click(function() {
    var nextIndex = currIndex.next();

    // التحقق من وجود العنصر التالي
    if (nextIndex.length > 0) {
        var nextImg = nextIndex.children("img").attr("src");
        $("#main").attr("src", nextImg);
        currIndex = nextIndex;
    }
});

$("#left").click(function() {
    var prevIndex = currIndex.prev();

    // التحقق من وجود العنصر السابق
    if (prevIndex.length > 0) {
        var prevImg = prevIndex.children("img").attr("src");
        $("#main").attr("src", prevImg);
        currIndex = prevIndex;
    }
});

بهذه التعديلات، ستتحقق الأسهم اليمينية واليسرى من وجود العناصر التالية والسابقة على التوالي قبل تغيير الصورة، وبالتالي لن يحدث خطأ عند الوصول إلى الصورة الأخيرة.

بالطبع! في تطبيقك، تستخدم مكتبة jQuery لتحقيق تبديل الصور في المعرض عبر الضغط على الأسهم اليمنى واليسرى. تقوم بتعريف متغير currIndex لتتبع الصورة الحالية في المعرض، وتستخدم دالة next() وprev() للانتقال إلى الصورة التالية أو السابقة على التوالي.

عند الضغط على الزر اليمنى #right، تحاول الحصول على العنصر التالي nextIndex وصورته وتعيينها كصورة رئيسية في المعرض. ثم تحدث المتغير currIndex ليتوافق مع الصورة الجديدة.

بالمثل، عند الضغط على الزر اليسار #left، تحاول الحصول على العنصر السابق prevIndex وصورته وتعيينها كصورة رئيسية في المعرض. ثم تحدث المتغير currIndex ليتوافق مع الصورة الجديدة.

مشكلتك الحالية تكمن في أن الكود لا يتعامل بشكل صحيح مع الصورة الأخيرة، وهذا يعود إلى عدم وجود العنصر التالي أو السابق في هذه الحالة. من خلال التحقق من طول العنصر المستهدف قبل تغيير الصورة، يمكنك تجنب الخطأ وجعل تبديل الصور يعمل بشكل صحيح حتى عندما تكون في الصورة الأخيرة.