The "Tiny Slider" component is a lightweight and responsive slider/carousel library for displaying images or content in a slideshow format. This section focuses on using Tiny Slider to create a simple single-item slider, which is useful for showcasing one piece of content at a time, such as a featured image or a product.
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
The single-item slider created using Tiny Slider is an excellent choice when you need to display content one item at a time in a visually appealing and responsive manner. You can easily integrate this slider into your web application to showcase featured images, products, or any other content that benefits from a carousel-style presentation.
The "Tiny Slider" component allows you to create responsive and feature-rich sliders/carousels to display multiple items simultaneously. This section focuses on using Tiny Slider to create a multiple-item slider, which is ideal for showcasing a collection of images, products, or content in a compact and visually appealing format.
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
The multiple-item slider created using Tiny Slider is a versatile component for showcasing collections of content, images, or products in a visually appealing and responsive manner. By following the steps outlined above and customizing the slider settings to meet your specific needs, you can enhance your website or application with an interactive and user-friendly carousel.
The "Tiny Slider" component provides an easy way to create responsive sliders and carousels that adapt to various screen sizes. This section focuses on configuring Tiny Slider for responsive display, ensuring that your slider looks and functions seamlessly on both desktop and mobile devices.
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
By configuring Tiny Slider with responsive settings, you ensure that your slider adapts gracefully to different devices and screen sizes. This flexibility enhances the user experience and ensures that your content looks stunning on both desktop and mobile platforms.
Center mode is a popular slider configuration that places the active slide in the center of the slider container, with partially visible slides on each side. This creates an engaging and visually appealing carousel effect. This section demonstrates how to configure Tiny Slider to achieve center mode.
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
Center mode is a popular slider configuration that places the active slide in the center of the slider container, with partially visible slides on each side. This creates an engaging and visually appealing carousel effect. This section demonstrates how to configure Tiny Slider to achieve center mode.
Fade animation is a sleek and elegant way to transition between slides in a slider. Tiny Slider provides a simple configuration to achieve a fade effect when moving from one slide to another. This section demonstrates how to set up Tiny Slider with fade animation.
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/product10-400x400.jpg"
alt="Tailwise - Admin Dashboard Template"
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/product4-400x400.jpg"
alt="Tailwise - Admin Dashboard Template"
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/product3-400x400.jpg"
alt="Tailwise - Admin Dashboard Template"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
The fade animation in Tiny Slider provides a smooth and visually appealing way to transition between slides. It's particularly effective for sliders that need to convey a sense of elegance and style. With fade animation enabled, your slider will seamlessly fade in and out between slides, creating an engaging user experience.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| `getRef` | `(el: TinySliderElement) => void` | A function that receives a reference to the TinySlider container element. |
| `options` | `TinySliderSettings` | The settings and configuration options for the TinySlider. Defaults to an empty object. |