لینک‌های مفید برای شرکت در مسابقه:

در زمان مسابقه می‌توانید سوال‌های خود را از قسمت "سوال بپرسید" مطرح کنید.

اسلایدر محصولات


پروژه اولیه🔗

پروژه‌ی اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

ساختار پروژه
product-slider
├── assets
│   ├── css
│   │   ├── index.css
│   │   ├── productCard.css
│   │   └── productSlider.css
│   ├── font
│   │   └── Vazir.ttf
│   └── images
│       ├── 01.jpg
│       ├── 02.jpg
│       ├── 03.jpg
│       ├── 04.jpg
│       ├── 05.jpg
│       ├── 06.jpg
│       ├── favicon.ico
│       ├── next.png
│       └── previous.png
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── data
│   └── index.js
├── utils
│   └── number.js
├── cypress.json
├── index.html
├── package.json
└── script.js
Plain text

جزئیات🔗

ظاهر کلی برنامه به‌این صورت است:

ظاهر برنامه

فرض کنید که می‌خواهیم برای صفحه‌ی اصلی وب‌سایت یک اسلایدر یا نمایش‌دهنده‌ی محصول ایجاد کنیم. این اسلایدر باید در لحظه از بین محصولات یک محصول را به صورت تصادفی به کاربر نمایش دهد.

مواردی که باید در این سوال رعایت کنید:🔗

  • مدت زمان نمایش هر اسلاید ۴ ثانیه است.
  • بعد از گذشتن ۴ ثانیه محصول تصادفی بعدی نمایش داده می‌شود.
  • کاربر باید بتواند توسط دکمه های مربوطه، اسلاید قبل و بعد را مشاهده کند.
  • انتخاب و نمایش محصول جدید باید به صورت تصادفی باشد و نباید شامل دو محصول آخر که نمایش داده شده است، باشد.

تغییرات لازم برای هر فایل:🔗

  • فایل script.js: موارد خواسته شده باید در این فایل قرار داده شوند.
  • در فایل فوق سه تابع برای شما در نظر گرفته شده است که باید آن‌ها را تکمیل کنید. ​

نکات🔗

  • فرض کنید حداقل تعداد محصولات ۴ عدد خواهد بود.
  • شما تنها مجاز به اعمال تغییرات در فایل‌ script.js هستید.
  • برای ارسال پاسخ فقط فایل script.js ارسال کنید.
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.