اجزای "Tiny Slider" یک کتابخانه اسلایدر/کاروسل سبک و واکنش‌پذیر برای نمایش تصاویر یا محتوا به صورت اسلایدشو است. این بخش بر روی استفاده از Tiny Slider برای ایجاد یک اسلایدر ساده با یک آیتم تمرکز دارد که برای نمایش یک محتوا یا محصول در یک زمان مناسب است.
HTMLOpenTagdiv class="mx-6"HTMLCloseTag
HTMLOpenTagdiv
data-config="single-item"
id="single-item-slider" class="tiny-slider"
HTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
1
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
2
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
3
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
4
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
5
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
6
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
اسلایدر با یک آیتم ایجاد شده با استفاده از Tiny Slider انتخاب عالی است زمانی که نیاز دارید تا محتوا را به یک آیتم در هر زمان به شیوه‌ای جذاب و واکنش‌پذیر نمایش دهید. شما می‌توانید به آسانی این اسلایدر را به برنامه وب خود ادغام کنید تا تصاویر ویژه، محصولات یا هر محتوای دیگری را که از یک ارائه‌ی اسلایدی به سبک کاروسل بهره‌مند است، به نمایش بگذارید.
اجزای "Tiny Slider" به شما امکان می‌دهد تا اسلایدرها/کاروسل‌های واکنش‌پذیر و پر ویژگی را برای نمایش چندین آیتم به صورت همزمان ایجاد کنید. این بخش بر روی استفاده از Tiny Slider برای ایجاد یک اسلایدر با چندین آیتم تمرکز دارد که برای نمایش یک مجموعه تصاویر، محصولات یا محتوا به شکل فشرده و جذاب مناسب است.
HTMLOpenTagdiv class="mx-6"HTMLCloseTag
HTMLOpenTagdiv
data-config="multiple-items"
id="multiple-item-slider" class="tiny-slider"
HTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
1
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
2
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
3
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
4
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
5
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
6
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
7
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
8
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
9
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
اسلایدر با چندین آیتم ایجاد شده با استفاده از Tiny Slider یک اجزای چند منظوره برای نمایش مجموعه‌های محتوا، تصاویر یا محصولات به صورت جذاب و واکنش‌پذیر است. با دنبال کردن مراحل مشخص شده بالا و سفارشی‌سازی تنظیمات اسلایدر برای برآورده کردن نیازهای خاص خود، می‌توانید وب‌سایت یا برنامه خود را با یک کاروسل تعاملی و کاربرپسند بهبود بخشید.
اجزای "Tiny Slider" راه آسانی را برای ایجاد اسلایدرها و کاروسل‌های واکنش‌پذیر فراهم می‌کند که با اندازه‌های مختلف صفحه سازگاری دارند. این بخش بر روی پیکربندی Tiny Slider برای نمایش واکنش‌پذیر تمرکز دارد، تضمین می‌کند که اسلایدر شما به طور بی‌دردسر و به شکلی بی‌نقص روی دستگاه‌های رایانه‌های رومیزی و تلفن‌های همراه عمل کند.
HTMLOpenTagdiv class="mx-6 pb-8"HTMLCloseTag
HTMLOpenTagdiv
data-config="responsive"
id="responsive-slider" class="tiny-slider"
HTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
1
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
2
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
3
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
4
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
5
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
6
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
7
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
8
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
با پیکربندی Tiny Slider با تنظیمات واکنش‌پذیر، اطمینان حاصل می‌شود که اسلایدر شما به شکلی آرام و زیبا به دستگاه‌ها و اندازه‌های مختلف صفحه سازگار باشد. این انعطاف‌پذیری تجربه کاربر را بهبود می‌بخشد و اطمینان می‌دهد که محتوای شما به همه دسکتاپ‌ها و پلتفرم‌های موبایل به شکل جذابی نمایش داده شود.
حالت مرکزی یک پیکربندی محبوب اسلایدر است که اسلاید فعال را در مرکز ظرف اسلایدر قرار می‌دهد، با اسلایدهای جزئیا قابل مشاهده در هر دو طرف. این اثری کاروسلی جذاب و بصری ایجاد می‌کند. این بخش نشان می‌دهد که چگونه Tiny Slider را برای دستیابی به حالت مرکزی پیکربندی کنید.
HTMLOpenTagdiv class="mx-6"HTMLCloseTag
HTMLOpenTagdiv
data-config="center-mode"
id="center-mode-slider" class="tiny-slider"
HTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
1
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
2
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
3
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
4
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
5
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-32 px-2"HTMLCloseTag
HTMLOpenTagdiv
class="h-full rounded-md bg-slate-100 dark:bg-darkmode-400"HTMLCloseTag
HTMLOpenTagh3
class="flex h-full items-center justify-center text-2xl font-medium"HTMLCloseTag
6
HTMLOpenTag/h3HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
حالت مرکزی یک پیکربندی محبوب اسلایدر است که اسلاید فعال را در مرکز ظرف اسلایدر قرار می‌دهد، با اسلایدهای جزئیا قابل مشاهده در هر دو طرف. این اثری کاروسلی جذاب و بصری ایجاد می‌کند. این بخش نشان می‌دهد که چگونه Tiny Slider را برای دستیابی به حالت مرکزی پیکربندی کنید.
انیمیشن پرده‌ای یک راه زیبا و شیک برای انتقال بین اسلایدها در یک اسلایدر است. Tiny Slider پیکربندی ساده‌ای را برای دستیابی به اثر پرده‌ای هنگام حرکت از یک اسلاید به دیگری فراهم می‌کند. این بخش نشان می‌دهد که چگونه Tiny Slider را برای ایجاد انیمیشن پرده‌ای پیکربندی کنید.
HTMLOpenTagdiv class="mx-6 pb-8"HTMLCloseTag
HTMLOpenTagdiv
data-config="fade-mode"
id="fade-animation-slider" class="tiny-slider"
HTMLCloseTag
HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag
HTMLOpenTagdiv class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
HTMLOpenTagimg
src="dist/images/products/product5-400x400.jpg"
alt="تیل وایز - قالب داشبورد مدیریتی"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag
HTMLOpenTagdiv class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
HTMLOpenTagimg
src="dist/images/products/product1-400x400.jpg"
alt="تیل وایز - قالب داشبورد مدیریتی"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="h-64 px-2"HTMLCloseTag
HTMLOpenTagdiv class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
HTMLOpenTagimg
src="dist/images/products/product10-400x400.jpg"
alt="تیل وایز - قالب داشبورد مدیریتی"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
انیمیشن پرده‌ای در Tiny Slider روشی صمیمی و بصری جذاب برای انتقال بین اسلایدها فراهم می‌کند. این انیمیشن به ویژه برای اسلایدرهایی که نیاز به انتقالی از شیک و اعتمادپذیری دارند، بسیار موثر است. با فعال کردن انیمیشن پرده‌ای، اسلایدر شما به طور بی‌درنگ بین اسلایدها محو و ظاهر می‌شود، تجربه کاربری جذابی ایجاد می‌کند.
در این بخش، اطلاعات جزئی در مورد ویژگی‌ها، کلاس‌ها و گزینه‌های موجود که می‌توانید با اجزاء است. درک این خصوصیات برای سفارشی کردن و پیکربندی اجزاء برای مطابقت با نیازهای خاص شما ضروری است.
در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:
| پراپ (Prop) | نوع (Type) | شرح |
|---|---|---|
| `getRef` | `(el: TinySliderElement) => void` | یک تابع که یک مرجع به عنصر مخزن TinySlider دریافت می‌کند. |
| `options` | `TinySliderSettings` | تنظیمات و گزینه‌های پیکربندی برای اسلایدر کوچک. پیش‌فرض به یک شیء خالی است. |