ساخت اسلایدر

سلام خوبی بیین از اسمت خیلی خوشم اومد فک کنم کرد باشی:)
ببین به صورت کلی برای پیاده سازی اسلایدر با استفاده از جاوااسکریپت و CSS میتونی از تکنیک‌های مختلفی استفاده کنی که من پیشنهادم فریم ورک های مثل بوت استرپه به ولی کلا میتونی از HTML، CSS و JavaScript برای ایجاد یک اسلایدر ساده استفاده کنی

اینم یه کد خوب

HTML:

<div class="slider">
  <div class="slides">
    <img src="slide1.jpg" alt="Slide 1">
    <img src="slide2.jpg" alt="Slide 2">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
</div>

CSS:

.slider {
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slides img {
  width: 100%;
}

JavaScript:

const slider = document.querySelector('.slider');
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');

let counter = 1;
const size = images[0].clientWidth;

slides.style.transform = 'translateX(' + (-size * counter) + 'px)';

function nextSlide() {
  if (counter >= images.length - 1) return;
  slides.style.transition = "transform 0.4s ease-in-out";
  counter++;
  slides.style.transform = 'translateX(' + (-size * counter) + 'px)';
}

function prevSlide() {
  if (counter <= 0) return;
  slides.style.transition = "transform 0.4s ease-in-out";
  counter--;
  slides.style.transform = 'translateX(' + (-size * counter) + 'px)';
}

slider.addEventListener('transitionend', () => {
  if (images[counter].id === 'last-clone') {
    slides.style.transition = "none";
    counter = images.length - 2;
    slides.style.transform = 'translateX(' + (-size * counter) + 'px)';
  }

  if (images[counter].id === 'first-clone') {
    slides.style.transition = "none";
    counter = images.length - counter;
    slides.style.transform = 'translateX(' + (-size * counter) + 'px)';
  }
});

درباره سوال دومت هم اسلایدر محصولات توی وبسایت کتاب چی ممکنه به منظور نمایش تصاویر کتاب‌ها و جزئیات مربوط به هر کتاب استفاده بشه این نوع اسلایدر معمولاً برای جذب توجه کاربران و نمایش بهتر محصولات در صفحه استفاده میشه

سلام دوست عزیز، قبل از هر چیز ممنون بابت پاسخگویی در ضمن در مورد اسمم درست حدس زدی 😃.
ممنون بابت کد ارسالی برم یکم با کنسول بازی کنم فکر کنم بیشتر سوالاتم با clientWidth و ... حل بشه ❤️
.
.
.
برای پیاده سازی اسلایدر ساده مشکلی ندارم بیشتر منظورم اسلایدر های پیشرفته بود و بخصوص حالت های drag کردن و touch
@Arshiamohammadei

@ako خب ببین یه سری کتابخونه ها هست مخصوص طراحی اسلایدره الان یادم نمیاد ولی سرچ کنی خیلی چیزهای تابی هست