Tiny slider
نحوه استفاده از پلاگین Tiny slider
<div class="tiny-slider">
<div class="tiny-slider-inner">
<!-- Slider items -->
<div class="item"> <img src="assets/images/about/01.jpg" alt=""> </div>
<div class="item"> <img src="assets/images/about/02.jpg" alt=""> </div>
<div class="item"> <img src="assets/images/about/03.jpg" alt=""> </div>
</div>
</div>
ما امکانات Tiny Slider را ارائه کرده ایم، بنابراین نیازی به تغییر در فایل های جاوا اسکریپ یا CSS ندارید. لیستی از تمام امکانات Tiny Slider و توضیحات آن در جدول زیر ارائه شده است:
| نام Attributes | توضیحات | سایر ویژگی ها |
|---|---|---|
| data-arrow="true" | فعال یا غیر فعال کردن فلش (arrows) | Boolean (true or false) |
| data-dots="false" | فعال یا غیر فعال کردن dots | Boolean (true or false) |
| data-mode="false" | تعیین Mode | "carousel" | "gallery" |
| data-axis="false" | تعیین ترازبندی | "horizontal" | "vertical" |
| data-items="1" | تعیین تعداد آیتم در دستگاه های مختلف | Numbers (1 2 3 4 5 6 ....) |
| data-items-xs="2" | تعیین تعداد آیتم در اندازه ی 575 پیکسل به بالا | Numbers (1 2 3 4 5 6 ....) |
| data-items-sm="3" | تعیین تعداد آیتم در اندازه ی 576 پیکسل تا 767 پیکسل | Numbers (1 2 3 4 5 6 ....) |
| data-items-md="4" | تعیین تعداد آیتم در اندازه ی 768 پیکسل تا 991 پیکسل | Numbers (1 2 3 4 5 6 ....) |
| data-items-lg="5" | تعیین تعداد آیتم در اندازه ی 992 پیکسل تا 1191 پیکسل | Numbers (1 2 3 4 5 6 ....) |
| data-items-xl="6" | تعیین تعداد آیتم در اندازه ی 1200 پیکسل به بالا | Numbers (1 2 3 4 5 6 ....) |
| data-autoplay="true" | فعال یا غیرفعال کردن قابلیت autoplay | Boolean (true or false) |
| data-autoplaytime="2000" | مدت زمان autoplay به میلی ثانیه | Number MS |
| data-speed="1000" | تعیین سرعت رفتن به اسلاید بعدی به میلی ثانیه | Number MS |
| data-gutter="30" | تعیین فاصله بین دو آیتم | Number in px |
| data-edge="30" | تعیین فاصله هر آیتم از بیرون به پیکسل | Number in px |
| data-loop="true" | فعال یا غیرفعال کردن loop | Boolean (true or false) |
| data-autowidth="true" | تعیین عرض پیش فرض | Boolean (true or false) |
| data-autoheight="true" | تعیین ارتفاع پیش فرض | Boolean (true or false) |
| data-hoverpause="true" | متوقف شدن اسلایدر هنگام قرارگیری ماوس روی اسلایدر | Boolean (true or false) |
| data-touch="true" | فعال بودن قابلیت touch | Boolean (true or false) |
| data-drag="true" | فعال بودن قابلیت drag | Boolean (true or false) |
| data-rewind="true" | عدم تکرار آیتم ها | Boolean (true or false) |
مثال هایی از نحوه استفاده از ویژگی های بالا را در کد زیر مشاهده کنید:
<div class="tiny-slider">
<div class="tiny-slider-inner" data-arrow="true" data-dots="false" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-sm="3" data-items-xs="2" >
<!-- Slider items -->
<div class="item"> <img src="assets/images/about/01.jpg" alt=""> </div>
<div class="item"> <img src="assets/images/about/02.jpg" alt=""> </div>
<div class="item"> <img src="assets/images/about/03.jpg" alt=""> </div>
</div>
</div>