ازاى اعمل ال SLIDER لاكن بدون مكتبات مثل bootstrap وكدا

انشئ كود html كالتالي :

<!-- الحاوية الكبيرة والتي تحتوي على السليدر -->
<div class="slideshow-container">

  <!-- صور بالحجم الكامل مع رقم و نص -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <!-- ازرار السليدر -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- النقاط التنقل التي تظهر في منتصف السليدر -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

كود الـ css :

* {box-sizing:border-box}

/* تنسيق الحاوية */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* اخفاء الصور بالحالة الافتراضية */
.mySlides {
  display: none;
}

/* تنسيقات زر السابق والتالي */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* تنسيق موضع زر التالي */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* على ازرار التنقل hover التنسيقات الخاصة بالـ */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* تنسيق النص الموجود بالسلايدات */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* تنسيق الارقام الموجودة بالسلايدات */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* تنسيق نقاط التنقل الموجودة في منتصف السلايدر */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* الانميشن الخاص بحركة السليدر */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

اكواد الـ js :

let slideIndex = 1;
showSlides(slideIndex);

// التحكم بازرار السابق والتالي
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// التحكم بنقاط التنقل الموجودة في المنتصف
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

وهذا مثال حي عن الـ slider الذي قمت بمشاركة الكود الخاص به معك :

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

يمكنك إنشاء سلايدر من خلال html , css , js  بحيث يمكن إنشاء كود html بهذا الشكل 

<div class="slider-container">
  <div class="slider">
    <div class="slide"><img src="slide1.jpg"></div>
    <div class="slide"><img src="slide2.jpg"></div>
    <div class="slide"><img src="slide3.jpg"></div>
  </div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

ثم يجب تنسيق هذا السلايدر باستخدام css 

.slider-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider {
  position: absolute;
  width: 300%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  width: 33.333%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide img {
  max-width: 100%;
  max-height: 100%;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

ثم لاستكمال أحداث السلايدر من زر التالي و زر السابق و تحريك الصور يجب استخدام جافاسكربت بهذا الشكل 

const slider = document.querySelector('.slider');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let counter = 0;

nextBtn.addEventListener('click', () => {
  counter++;
  if (counter > 2) {
    counter = 0;
  }
  slider.style.transform = `translateX(-${counter * 33.333}%)`;
});

prevBtn.addEventListener('click', () => {
  counter--;
  if (counter < 0) {
    counter = 2;
  }
  slider.style.transform = `translateX(-${counter * 33.333}%)`;
});

يوجد أمثلة كثيره على ال slider من خلال ال javascript بدون مكتبات جاهزة ما عليك فقط غير البحث 

مثال على ذلك موقع codepen يوفر الكثير من الأكواد الخاصة بال frontend ما عليك غير البحث . هذا الرابط يحتوي على أمثلة لل slider وحاول فهم طريقة العمل بنفسك 

سأشرح لك طريقة العمل 

أولاً ال html 

<div class="slider">
  <div class="item">
    <img src="https://s3.tproger.ru/uploads/2020/07/field.jpg">
  </div>
  <div class="item">
    <img src="https://s3.tproger.ru/uploads/2020/07/rose.jpg">
  </div>
  <div class="item">
    <img src="https://s3.tproger.ru/uploads/2020/07/leaf.jpg">
  </div>
  <a class="previous" onclick="previousSlide()">&#10094;</a>
  <a class="next" onclick="nextSlide()">&#10095;</a>
</div>

قمنا ببناء ال slider وإضافة الصور والأسهم  تم إضافة الدوال previousSlide وnextSlide لها

ال javascript

/* رقم الصور الإفتراضية  */
let slideIndex = 1;
/*showSlides نقوم باستدعاء الدالة  */
showSlides(slideIndex);
/*slideIndex يزيد ال nextSlide عند الضغط على الزر  */
function nextSlide() {
    showSlides(slideIndex += 1);
}
/* slideIndex يقل ال previousSlide عند الضغط على الزر */
function previousSlide() {
    showSlides(slideIndex -= 1);  
}
/* الصورة الإفتراضية */
function currentSlide(n) {
    showSlides(slideIndex = n);
}
function showSlides(n) {
    let i;
    /*slides نحدد الصور بالمتغير  */
    let slides = document.getElementsByClassName("item");
    
    /*  إذا وصلنا لآخر صورة نقوم بإعادة الصور من الأول أو العكس*/
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
  
    /* نقوم بإخفاء جميع الصور أولاً */
    for (let slide of slides) {
        slide.style.display = "none";
    }
    /* ثم إظهار الصورة المفترض أن تكون موجودة فقط */
    slides[slideIndex - 1].style.display = "block";    
}

أما بالنسبة لل css هي تنسيقات قم بإضافتها كما يناسبك

إذا أردت إنشاء slider مماثل للصورة في سؤالك، يمكنك استخدام الكود التالي مه شرح التفاصيل الخاصة به.

أولاً ، سنبدأ بإنشاء هيكل HTML للمتزلج. يجب علينا إنشاء عناصر HTML لكل شريحة من الشرائح وتجميعها داخل العنصر الرئيسي الذي سيحتوي على جميع الشرائح. سنستخدم عنصر div لتقسيم الصفحة إلى عناصر أصغر. الهيكل الأساسي للشريحة يجب أن يكون على هذا النحو:

<div class="slider">
  <div class="slide active">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Slide 3">
  </div>
  <button class="prev-btn">Prev</button>
  <button class="next-btn">Next</button>
</div>

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

الآن ، يجب علينا استخدام CSS لتصميم الشرائح وإظهارها بشكل جيد. يمكننا استخدام position و display و z-index لإظهار الشرائح في المكان المناسب على الصفحة.

.slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

.prev-btn {
  left: 20px;
}

.next-btn {
  right: 20px;
}

تم تعيين position: relative على العنصر الرئيسي للمتزلج لأننا سنستخدم position: absolute على العناصر الفرعية لتحديد مكانها. تم تعيين العرض والارتفاع على العنصر الرئيسي للتحكم في حجم المتزلج على الصفحة.

تم تعيين position: absolute و top: 0 و left: 0 على الشرائح لأننا نريد عرضها في المكان الصحيح في المتزلج. تم تعيين opacity إلى 0 لكي يتم إخفاء جميع الشرائح غير النشطة.

تم تعيين transition على opacity لإضافة تأثير تحويل عند تغيير الشريحة. تم تعيين z-index إلى -1 لجعل جميع الشرائح مخفية خلف العنصر النشط.

عندما تصبح الشريحة نشطة ، يتم تعيين z-index إلى 1 لجعلها تظهر فوق الشرائح الأخرى. تم تعيين object-fit: cover على الصورة لجعلها تملأ المساحة المتاحة بالشريحة بشكل كامل.

تم تعيين position: absolute و bottom: 0 و left: 0 و width: 100٪ على العنصر النصي لجعله يظهر في الجزء السفلي من الشريحة. تم تعيين خصائص النص (font-size و margin) لتخصيص النص وفقًا لتصميمك.

أخيرًا ، سنستخدم JavaScript لتغيير الشريحة النشطة بعد فترة زمنية معينة.

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentSlide = 0;

// Show the first slide
slides[currentSlide].classList.add('active');

function prevSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
}

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);

كود JavaScript، يقوم بتحديد الشرائح (slides) وأزرار التحكم (previous و next)، ثم يعطي الوظيفة (function) للزر السابق (previous) والتالي (next) للتحكم في الشرائح.

في البداية، يتم تحديد الشرائح عن طريق استخدام document.querySelectorAll()، الذي يبحث عن جميع العناصر التي تحتوي على الكلاس (class) المعطى، في هذه الحالة هو .slide، ويتم حفظها في متغير slides باستخدام const.

ثم يتم تحديد الأزرار عن طريق استخدام document.querySelector()، الذي يبحث عن أول عنصر يحتوي على الكلاس المعطى، في هذه الحالة هم .prev-btn و .next-btn، ويتم حفظهما في متغيرات prevBtn و nextBtn باستخدام const.

ثم يتم تعيين الوظيفة (function) لكل زر بواسطة .addEventListener()، الذي يقوم بتحديد الحدث (event) الذي يتم الاستماع إليه، في هذه الحالة هو click، والوظيفة التي يتم تشغيلها عند حدوث هذا الحدث.

لتحديد الشريحة الحالية وإظهارها، يتم تعيين متغير currentSlide إلى القيمة 0، ويتم إظهار الشريحة الأولى باستخدام .classList.add() وإضافة الكلاس active.

لتبديل الشرائح بواسطة الأزرار، يتم إنشاء وظائف (functions) prevSlide() و nextSlide() التي تزيل الكلاس active من الشريحة الحالية وتحديد الشريحة التي ستظهر، بحيث يتم تطبيق العملية الحسابية (currentSlide - 1 + slides.length) % slides.length للحصول على الشريح