Metronic - Tailwind CSS Scrollable

To implement a custom scrollable content with a fixed height, simply utilize the


         scrollable

custom class. This class is designed to create a improved scrollable area within your HTML document.

Preview HTML

Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.

With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.

One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.

Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.

				
					<div class="rounded-lg border p-4 scrollable h-[300px]">
 <p class="mb-3">
  Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.
 </p>
 <p class="mb-3">
  With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.
 </p>
 <p class="mb-3">
  One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.
 </p>
 <p class="mb-3">
  Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.
 </p>
</div>

Use the


         scrollable-hover

custom class to implement a scrollable content area with a customized scrollbar, which becomes visible upon mouse hover.

Preview HTML

Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.

With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.

One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.

Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.

				
					<div class="rounded-lg border p-4 scrollable-hover h-[300px]">
 <p class="mb-3">
  Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.
 </p>
 <p class="mb-3">
  With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.
 </p>
 <p class="mb-3">
  One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.
 </p>
 <p class="mb-3">
  Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.
 </p>
</div>

Below example demonstrates horizontally scrollable content.

Preview HTML

Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS. With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.

One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code. Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.

				
					<div class="rounded-lg border p-4 scrollable lg:w-[600px]">
 <div class="w-[1000px]">
  <p class="mb-3">
   Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.
				With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.
  </p>
  <p>
   One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.
				Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.
  </p>
 </div>
</div>

Below example demonstrates a scrollable content with bith horizontal and vertical scrollbars.

Preview HTML

Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS. With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.

One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code. Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.

				
					<div class="rounded-lg border p-4 scrollable lg:w-[600px] h-[300px]">
 <div class="w-[1000px]">
  <p class="mb-3">
   Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.
				With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.
  </p>
  <p>
   One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.
				Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.
  </p>
  <p>
   One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.
				Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.
  </p>
  <p>
   One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.
				Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.
  </p>
 </div>
</div>

Use


         data-scrollable="true"

to auto initialize the Tailwind CSS KTScrollable component that dynamically calculates the height of the scrollable content by subtracting the the total heights of specific elements defined via


         data-scrollable-dependencies="#header, #footer"

the total spacings of specific elements defined via


         data-scrollable-wrappers="#header, #footer"

within the HTML document.

Preview HTML

Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.

With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.

Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.

One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.

Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.

				
					<div class="scrollable rounded-lg border p-4" data-scrollable="true" data-scrollable-dependencies="#header, #footer" data-scrollable-height="auto" data-scrollable-offset="10px" data-scrollable-wrappers="#page, #wrapper, #content">
 Content goes here...
</div>

Apply the


         scrollable-y

class to the


         modal-body

element to enable vertical scrolling within the scrollable body.

Preview HTML

Scrollable components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Scrollable components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Scrollable components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Scrollable components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Scrollable components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage. Scrollable components are commonly used for various purposes such as displaying login forms, confirming actions, presenting multimedia content, or showing detailed information. They provide a non-intrusive way to engage users and guide them through specific tasks or actions while maintaining the context of the underlying webpage.

				
					<button class="btn btn-primary" data-modal-toggle="#modal_1">
 Show Scrollable	Modal
</button>
<div class="modal" data-modal="true" id="modal_1">
 <div class="modal-content max-w-[600px] top-[10%] max-h-[95%]">
  <div class="modal-header">
   <h3 class="modal-title">
    Scrollable Title
   </h3>
   <button class="btn btn-xs btn-icon btn-icon-xl btn-light" data-modal-dismiss="true">
    <i class="ki-outline ki-cross">
    </i>
   </button>
  </div>
  <div class="modal-body scrollable-y py-0 my-5 pl-6 pr-3 mr-3 h-[300px] max-h-[95%]">
   Scrollable components are commonly used for various purposes such as displaying login forms, 
				confirming actions, presenting multimedia content, or showing detailed information. 
				They provide a non-intrusive way to engage users and guide them through 
				specific tasks or actions while maintaining the context of the underlying webpage.
  </div>
  <div class="modal-footer justify-end">
   <div class="flex gap-4">
    <button class="btn btn-light" data-modal-dismiss="true">
     Cancel
    </button>
    <button class="btn btn-primary">
     Submit
    </button>
   </div>
  </div>
 </div>
</div>

Apply the


         scrollable-y

class to the


         card-body

element to enable vertical scrolling within the scrollable card.

Preview HTML

Card Title

Tailwind CSS, a utility-first CSS framework, has gained immense popularity for its simplicity, flexibility, and efficiency in building modern web interfaces. Among its plethora of features, one that stands out is its ability to swiftly create stylish and responsive card components. These card components serve as fundamental building blocks for organizing content, displaying information, and enhancing user experience across web applications and websites

The Tailwind CSS card component offers developers a seamless way to structure content within a visually appealing container. With Tailwind's utility classes, creating cards becomes intuitive and hassle-free, allowing developers to focus on crafting engaging user interfaces rather than wrestling with complex CSS code

Card Footer

				
					<div class="card">
 <div class="card-header">
  <h3 class="card-title">
   Card Title
  </h3>
 </div>
 <div class="card-body scrollable h-[200px] py-0 my-4 pr-4 mr-2">
  <div class="mb-4">
   Tailwind CSS, a utility-first CSS framework, has gained immense popularity for its simplicity, 
				flexibility, and efficiency in building modern web interfaces. Among its plethora of features, 
				one that stands out is its ability to swiftly create stylish and responsive card components. 
				These card components serve as fundamental building blocks for organizing content, 
				displaying information, and enhancing user experience across web applications and websites
  </div>
  <div>
   The Tailwind CSS card component offers developers a seamless way to structure content within a visually appealing container. 
				With Tailwind's utility classes, creating cards becomes intuitive and hassle-free, 
				allowing developers to focus on crafting engaging user interfaces rather than wrestling with complex CSS code
  </div>
 </div>
 <div class="card-footer">
  Card Footer
 </div>
</div>

Customize the scrollbar thumb color to match your design requirements using the CSS variable


         --tw-scrollbar-thumb-color: var(--tw-success)

.

Preview HTML

Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.

With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.

One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.

Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.

				
					<div class="rounded-lg border p-4 scrollable h-[300px]" style="--tw-scrollbar-thumb-color: var(--tw-success)">
 <p class="mb-3">
  Tailwind CSS is a popular utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-designed classes. It offers developers the flexibility to rapidly build responsive and visually appealing user interfaces without the need for writing custom CSS.
 </p>
 <p class="mb-3">
  With Tailwind CSS, you can easily create layouts, style typography, add colors, apply spacing, and more, using intuitive class names that directly map to CSS properties. Whether you're working on a small project or a large-scale application, Tailwind CSS empowers you to efficiently design and customize your web pages.
 </p>
 <p class="mb-3">
  One of the standout features of Tailwind CSS is its modular approach, which encourages code reuse and maintains consistency across your project. By composing classes together, you can quickly prototype and iterate on design concepts, resulting in cleaner and more maintainable code.
 </p>
 <p class="mb-3">
  Moreover, Tailwind CSS provides excellent support for responsive design, allowing you to create fluid layouts that adapt seamlessly to different screen sizes and devices. With built-in breakpoints and utility classes like sm:, md:, lg:, and xl:, you can easily customize the appearance of your website for various viewports.
 </p>
</div>

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Scrollable component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the


         dist/assets/css/styles.css

and


         dist/assets/js/core.bundle.js

bundles, making them available globally across all pages.

File	Description
`src/core/components/scrollable/scrollable.ts`	The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Scrollable component.
`src/core/plugins/components/scrollable.js`	The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Scrollable component.

The following markup outlines the core structure of the Tailwind CSS Scrollable component.

				
					<div class="scrollable h-[300px]">
 Content goes here...
</div>

This table outlines the custom CSS classes utilized for styling the default components of the Tailwind CSS Scrollable.

Class	Description
`scrollable`	Adds both horizontal and vertical scrolling to the content.
`scrollable-x`	Adds horizontal scrolling to the content.
`scrollable-y`	Adds vertical scrolling to the content.
`scrollable-auto`	Automatically adds scrolling based on content overflow.
`scrollable-x-auto`	Automatically adds horizontal scrolling based on content overflow.
`scrollable-y-auto`	Automatically adds vertical scrolling based on content overflow.
`scrollable-hover`	Adds scrollbars on hover.
`scrollable-x-hover`	Adds horizontal scrollbars on hover.
`scrollable-y-hover`	Adds vertical scrollbars on hover.

Auto-initialize all KTScrollable instances on page load by adding the


         data-scrollable="true"

attribute to your scrollable elements. This triggers on the fly initialization by the KTScrollable JavaScript component and auto calculated the scrollable element height.

				
					<div class="scrollable-y" data-scrollable="true" data-scrollable-dependencies="#header, #footer" data-scrollable-height="auto" data-scrollable-offset="10px" data-scrollable-wrappers="#page, #wrapper, #content">
 Content goes here...
</div>

These attributes allow you to set options for the KTScrollable component during initialization. The values you provide as strings are automatically converted to the appropriate KTScrollable Options .

HTML Attribute	Type	Default	Description
`data-scrollable`	`boolean`	`true`	Automatically initializes KTScrollable instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
`data-scrollable-save`	`boolean`	`true`	Enables saving the last scroll position in browser storage.
`data-scrollable-dependencies`	`string`	-	Specifies the comma-separated IDs of elements whose heights are calculated and subtracted from the window offset height to determine scrollable height.
`data-scrollable-wrappers`	`string`	-	Specifies the comma-separated IDs of elements whose spacings(margin, padding, border widths) are calculated and subtracted from the window offset height to determine scrollable height.
`data-scrollable-offset`	`string`	`"0px"`	Specifies the offset CSS value in pixel to subtract from the calculated height.

To initialize a new scrollable component, pass the corresponding DOM element and configuration options to the KTScrollable class constructor.

JavaScript HTML

				
					// Scrollable element
const scrollableEl = document.querySelector('#my_scrollable');

// Configuration options(optional)
const options = {
	save: true,
	dependencies: '#header, #footer',
	wrappers: '#page, #wrapper, #content',
	offset: 10
};

// Initialize object
const scrollable = new KTScrollable(scrollableEl, options);

				
					<div class="scrollable-y" data-scrollable="false">
 Content goes here...
</div>

To initialize the scrollable with JavaScript, use data-scrollable="false" attribute instead. This prevents automatic initialization on page load.

This table outlines the configuration options for initialization of Tailwind CSS Scrollable instances, using the KTScrollable JavaScript component.

Option	Type	Default	Description
`save`	`boolean`	`true`	Enables saving the last scroll position in browser storage.
`dependencies`	`string`	-	Specifies the comma-separated IDs of elements whose heights are calculated and subtracted from the window offset height to determine scrollable height.
`wrappers`	`string`	-	Specifies the comma-separated IDs of elements whose spacings(margin, padding, border widths) are calculated and subtracted from the window offset height to determine scrollable height.
`offset`	`string`	`"0px"`	Specifies the offset CSS value in pixel to subtract from the calculated height.

Manage and interact with KTScrollable instances using these static methods of


         KTScrollable

class.

Method	Description
`init()`	Automatically initializes KTScrollable object for all elements with the `data-scrollable="true"` attribute on page load.
`createInstances()`	Allows to create KTScrollable instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`getInstance(element)`	Returns the `KTScrollable` object associated with the given DOM element `element` .
`getOrCreateInstance(element)`	Returns the existing `KTScrollable` object for the provided DOM element `element` , or creates a new instance if none exists, then returns the same.

JavaScript HTML

				
					// Initialize all scrollables
KTScrollable.init()

// Initialzie pending scrollables
KTScrollable.createInstances();

// Get scrollable object
const scrollableEl = document.querySelector('#my_scrollable');
const scrollable = KTScrollable.getInstance(scrollableEl);

				
					<div class="scrollable-y" data-scrollable="true" data-scrollable-dependencies="#header, #footer" data-scrollable-height="auto" data-scrollable-offset="10px" data-scrollable-wrappers="#page, #wrapper, #content">
 Content goes here...
</div>

Use KTScrollable component's API methods to programmatically control its behavior.

Method	Description
`new KTScrollable(element, options)`	Creates an object instance of KTScrollable class for the given DOM `element` and configuration `options` .
`update()`	Updates the calculated height.
`getHeight()`	Returnes calculated height.
`getOption(name)`	Retrieves the value of a configuration option by `name` parameter from a KTScrollable instance.
`getElement()`	Retrieves the DOM element linked to a specific KTScrollable instance.
`on(eventName, handler)`	Allows attaching event listeners to the KTScrollable custom events using the `eventName` and `eventId` string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTScrollable. The function returns `string` as a unique identifier for the registered listener, allowing you to remove it later if needed.
`off(eventName, eventId)`	Removes an event listener for the `eventName` and `eventId` parameters attached with the `on` method.
`dispose()`	Removes the KTScrollable instance from an element, including any associated data stored on the DOM element.

JavaScript HTML

				
					const scrollableEl = document.querySelector('#my_scrollable');
const scrollable = KTScrollable.getInstance(scrollableEl);

const height = scrollable.getHeight();
scrollable.update();

				
					<div class="scrollable-y" data-scrollable="true" data-scrollable-dependencies="#header, #footer" data-scrollable-height="auto" data-scrollable-offset="10px" data-scrollable-wrappers="#page, #wrapper, #content">
 Content goes here...
</div>

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Tailwind CSS Scrollable

Default Scrollable

Hover

Horizontal

Both Scrollbars

Auto Height

With Card

Card Title

Customization

Source Code

HTML Markup

Classes

Data Attribute Initialization

JavaScript Initialization

Options

Utilities

Methods

On This Page