Views Slider

The Views Slider module for Drupal 10/11 provides a flexible and customizable solution for creating interactive sliders directly from Views. It supports custom field mapping, theme overrides, and deep Swiper JS integration. With full Twig template control, CSS customization, and configurable slider behavior, the module is ideal for users who want to build visually appealing sliders with ease.

Requirements

This module requires Drupal 10/11 and works with native Views, Twig, and core fields.

• No additional contributed modules are required outside of Drupal core.

Installation

Install as you would normally install a contributed Drupal module. For more details, see Installing Drupal Modules.

If using Composer:

composer require drupal/views_slider

Enable the module using Drush:

drush en views_slider

Configuration

1. Go to: Structure → Views → Add new view
2. Add required fields such as Slider Heading, Description 1, Description 2, Background Image, Link 1, Link 2, etc.
3. Select the Views Slider format under the View’s format options.
4. Map each field to its slider role:
   • Slider Heading
   • Slider Description 1
   • Slider Description 2
   • Slider Background Image
   • Slider Link 1
   • Slider Link 2
5. Configure Swiper JS settings (e.g., autoplay, looping, navigation arrows, pagination, responsive breakpoints).
6. Optionally, override layout Twig templates by copying templates/views-view-views-slider.html.twig into your theme.
7. Save your view configuration.

Configure Swiper Version:

After enabling the module, you can choose which version of Swiper to load from the CDN by visiting: /admin/config/media/swiper-library-settings

Customization

To fully customize the slider’s layout and behavior:

• Override default Twig templates such as templates/views-view-views-slider.html.twig within your theme.
• Customize slider appearance using CSS (e.g., colors, alignment, spacing, typography).
• Modify the slider’s HTML structure directly in Twig templates for advanced customization.
• Use Swiper JS configuration settings to control animations, transitions, direction, and responsiveness.

Additional customization is available through overriding libraries, adding custom CSS, or defining your own layout structure.

Troubleshooting

• Ensure that the View contains correctly configured fields and is outputting data properly.
• Verify that Twig template overrides are copied into the correct theme folder and cache is cleared.
• Confirm that custom CSS is being loaded by your theme.
• If color palettes or styles aren’t appearing, ensure that configurations are saved and properly applied.

The Views Slider module can be used anywhere Views is used — such as pages, blocks, or embedded displays — allowing site builders to design customizable sliders with different layouts and field mappings. The module is developer-friendly, providing template overrides, CSS flexibility, and Swiper JS integration for advanced customization.

Steps to Implement the Views Slider on a View:

1. Create or use an existing content type (e.g., Slider Content) and add fields such as title, descriptions, image, and links. Add content entries with slider data.
2. Go to Structure → Views and create a new view (e.g., Homepage Slider). Set Show to Content and filter by your content type.
3. Under Format, select Views Slider. This reveals all slider configuration options.
4. In the Views Slider settings, enable or disable Swiper features such as:
   • Looping
   • Autoplay
   • Slide Speed
   • Pagination
   • Navigation Arrows
   • Lazy Loading
   • Responsive Breakpoints

5. Map the fields:

   • Slider Heading: Map to Content Title or another heading field.
   • Description 1: Map to the first description field.
   • Description 2: Map to the second description field (optional).
   • Slider Background Image: Map to an image field.
   • Slider Link 1: Map to link or button fields.
   • Slider Link 2: Optional secondary link mapping.
6. Save the view.
7. Preview the slider to confirm correct field rendering, transitions, and layout structure.

Support

Please post bug reports, feature requests, and support requests to the Views Slider module issue queue. If you encounter issues, feel free to create an issue.

Additional Notes

The module includes basic CSS for layout, but you are encouraged to customize heading, description, buttons, spacing, and background styles based on your theme.
Navigation arrows and pagination may require custom styling depending on your front-end framework.