اذهب إلى المحتوى
  • 0

عارض الصور slider لا يقوم بالتنقل بين الصور بالشكل المطلوب

رزان الجهني4

السؤال

Recommended Posts

  • 0

هنالك عدة مشاكل وهي :

1- الوظيفة removeClass مكتوبة بشكل خاطئ حيث لم تضيفي الـ e للكلمة remove وكتبتها removClass وهذا خاطئ، ولحل المشكلة عدي الكود الخاص بالملف slider.js إلى الشكل التالي :

var $links = $('.itemlinks');

$links.click(function (e) {
	$links.removeClass('active');
	var clickedLink = $(e.target);
	var position = clickedLink.attr('data-pos');
	var translateValue = "translateX(" + position * 25 + "%)";
	$('#wrapper').css({
		Transform: translateValue
	});
	clickedLink.addClass('active');
});

$($links[0]).addClass('active');

2- والمشكلة الثانية من CSS حيث يبدو ان الصور موضوعة تحت بعضها البعض في الصفحة و لذلك فعندما يقوم العارض بالتنقل نحو اليسار  لا يظهر اي شيء، وهنالك عدة طرق لحل المشكلة واسهلها استخدام  display: flex للعنصر #wrapper والذي يحوي كل الشرائح كالتالي :

#wrapper {
      display: flex;
      width: 400%;
      height: 100%;
      transition: transform 0.5s ease-in-out;
}

3- والمشكلة الثالثة هي في محدد الـ CSS لكل من الصورة والعنصر الذي يحوي الصورة حيث انك كتبتي المحدد بالشكل :

#wrapper.content img{...}

من دون ترك مسافة بن الـ wrapper و الـ content و CSS تفهم من ذلك أنك تريد تحديد الصورة الموجودة داخل العنصر الذي له كل من الصف content و المعرف wrapper وهذا خاطئ لأن ما تريده انت هو العنصر الذي له الصف content والموجود داخل العنصر صاحب المعرف wrapper والمحدد لهذا العنصر  يكون بالشكل التالي :

#wrapper .content img{...}

4- بعد سرد المشاكل الثلاثة فهنالك نصيحة،

وهي ان تقومي بتعديل كود الـ CSS لكل من الصورة والعنصر الذي يحتويها إلى الشكل التالي :

#wrapper .content {
      width: 100%;
}

#wrapper .content img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}

وهذا عبارة عن تفضيل شخصي ويمكنك تجاهله.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...