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

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

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;
}

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