Views 3D Carousel Module

The Views 3D Carousel module enables you to create dynamic and visually appealing 3D carousels for displaying various content items on your Drupal site. This module seamlessly integrates with the Views module, offering a new display style that you can select when creating or editing views. The best part? It uses pure vanilla JavaScript with no jQuery dependency, ensuring a lightweight and modern user experience.

Features

Renders content items in a 3D carousel format.
Customizable options for time interval between slides, max width, screen height for different screen sizes, and perspective.
Breakpoints to ensure responsive design.
Play/pause button with automatic scrolling options.

How to Use

Install and enable the Views 3D Carousel module.
Create or edit a view in the Views module.
In the Format section, select 3D Carousel from the available display styles.
Configure the various options available under the Format Settings to customize the carousel according to your needs.
Set the number of items to display in the Pager settings, keeping in mind that pagination does not work with this display style. It is recommended to limit the number of items to a maximum of 30 for optimal performance.

Important Note on Pagination

Pagination does not work for the 3D Carousel display style. To ensure the best performance and user experience, we recommend setting a fixed number of items to display. The ideal number is up to 30 items. Exceeding this number may affect the carousel's performance and load times.

Configuration Options

Max Width: Choose the maximum width for the carousel (e.g., 300px, 400px, 500px, etc.).
Time in Seconds: Set the time interval for each slide (e.g., 3 seconds, 5 seconds, etc.).
Large Screen Height: Define the carousel's height for large screens (e.g., 300px, 400px, etc.).
Small Screen Height: Define the carousel's height for small screens (e.g., 200px, 250px, etc.).
Perspective: The perspective is set with the max width for best display/view, but if you want to override it, you can enter the number here in pixels.
Available Breakpoints: Choose the breakpoints to ensure the carousel is responsive (e.g., 576px, 768px, 992px, etc.).

Support and Contributions

If you encounter any issues or have suggestions for improvements, please open an issue in the module's issue queue. Contributions are welcome and appreciated!

To keep all support transparent and beneficial for the entire Drupal community, I kindly ask that you direct all questions and discussions related to my Drupal.org contributions to the project's issue queue on Drupal.org. This helps everyone in the community benefit from your questions and any solutions provided. Together, we can create something extraordinary. Thank you for your understanding and cooperation!

Views Vanilla Javascript 3D Carousel

Top 3 contributors

Issues