مشكلة بخصوص عارض شرائح في جافاسكربت

ما هي المشكلة التي تحدث تحديدا؟ تفحصت عارض الشرائح الخاص بك ولا يبدوا به اي مشكلة.

مع الضغط اكتر من مرة على next & previous بيحصل ان الصور بتظهر فوق بعضها وكمان ترقيم الصور بيتراكم فوق بعضه 

بتاريخ 5 دقائق مضت قال Adnane Kadri:

ما هي المشكلة التي تحدث تحديدا؟ تفحصت عارض الشرائح الخاص بك ولا يبدوا به اي مشكلة.

مع الضغط اكتر من مرة على next & previous بيحصل ان الصور بتظهر فوق بعضها وكمان ترقيم الصور بيتراكم فوق بعضه 

بتاريخ 35 دقائق مضت قال Mohamed Eid:

مع الضغط اكتر من مرة على next & previous بيحصل ان الصور بتظهر فوق بعضها وكمان ترقيم الصور بيتراكم فوق بعضه 

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

من ملف main.js نبحث عن: 

sliderContainer.innerHTML += arrimg[i];
sliderContainer.innerHTML += `<p id="p-${i}">${i + 1} / ${arrimg.length}</p>`;

ونكتب قبلهما مباشرة السطر:

sliderContainer.innerHTML = ''; // ++++++++++++++++
sliderContainer.innerHTML += arrimg[i];
sliderContainer.innerHTML += `<p id="p-${i}">${i + 1} / ${arrimg.length}</p>`;

ستلاحظ اختفاء المشكلة عند الضغط على زر next ولكن نفس الشيء سيبقى مستمرا عند الضغط على زر pre. 

نتفحص الشيفرات الخاصة بهما ونرى أننا لا نحقن اصلا اي محتوى في الحاوية، أرى أنك تقوم بتعليق الأسطر الخاصة بها لسبب ما:

// sliderContainer.innerHTML += arrimg[i];
  // sliderContainer.innerHTML += `  <p id="p-${i}"> ${i + 1} / ${
  //   arrimg.length
  // }</p>  `;

الغ تعليق هاته الأسطر، ولا تنسى اضافة السطر:

sliderContainer.innerHTML = '';

قبلهما مباشرة ايضا. 

يفترض ان يحل هذا المشكل لديك.

والله انت عبقرى انا تقريبا من اسبوعين متوقف عن المذاكرة بسبب المشكلة دى وانت حليتها بابسط طريقة ممكنة حقيقى تسلم ايدك 

بتاريخ 1 ساعة قال Mohamed Eid:

مع الضغط اكتر من مرة على next & previous بيحصل ان الصور بتظهر فوق بعضها وكمان ترقيم الصور بيتراكم فوق بعضه 

 

مع الضغط اكتر من مرة على next & previous بيحصل ان الصور بتظهر فوق بعضها وكمان ترقيم الصور بيتراكم فوق بعضه 

 

الملاحظ لديك في الصور أنها بأحجام مختلفة بما أنك تقوم بعرضهم دون أخفاء الشريحة السابقة تظهر لك وكأنها صورة فوق الأخرى واحدة أطول من الأخرى إعتماداً على حجم كل صورة. يمكنك حل خذه المشكلة من خلال css فقط من خلال إضافة سطرين للصنف img-slider وكما يلي

.img-slider {
    ...
    height: 15em; /* نعطي طول ثابت للصور مثلاً هذا الطول أو حسب ما تجده مناسب للتصميم*/
    object-fit: cover; /* أيضاً تحتاج وضع هذا الخيار الذي يعدل وضع الصورة آلياً في الشريحة دون تشويه*/
    ...
}

بتاريخ 2 دقائق مضت قال علي محسن:

الملاحظ لديك في الصور أنها بأحجام مختلفة وما أنك تقوم بعرضهم دون أخفاء الشريحة السابقة تظهر لك وكأنها صورة فوق الأخرى واحدة أطول من الأخرى إعتماداً على جدم كل صورة. يمكنك حل خذه المشكلة من خلال css فقط من خلال إضافة سطرين للصنف img-slider وكما يلي

 

	.img-slider {
	    ...
	    height: 15em; /* نعطي طول ثابت للصور مثلاً هذا الطول أو حسب ما تجده مناسب للتصميم*/
	    object-fit: cover; /* أيضاً تحتاج وضع هذا الخيار الذي يعدل وضع الصورة آلياً في الشريحة دون تشويه*/
	    ...
	}
	

 

اضافة الخواص للصورة نفسها ام للاب اللى بداخله الصورة ؟

بتاريخ 10 دقائق مضت قال Mohamed Eid:

اضافة الخواص للصورة نفسها ام للاب اللى بداخله الصورة ؟

نعم الخاصية object-fit تطبقها على الوسم img في الشريحة. إذا طبقتها على img-slider سيعمل أيضا بسبب ال inheritance.

تسلم ايدك يا هندسة