Slider

Fields to determine the layout and functionality of a slider.

  • Slider Label _[Text]
    _A label to for screen readers to describe the content of the slider. This element does not display visually.
  • Carousel Type [Choice]
    If Style is set to Slider
    Choices: Loop, Slide, Fade
  • Rewind _[Boolean]
    _If Style is set to Slider, determines whether to rewind the carousel when navigating past the last slide.
  • Arrow Style _[Choice]
    _If Style is set to Slider.
    Choices: Arrow, Chevron
  • Desktop, Tablet, Mobile [Responsive Groups]
    • Slides Per Page [Number]
      Set how many slides to show at a time.
    • Slides Per Move [Number]
      Set how many slides to navigate at a time.
    • Space between Slides _[Number]
      _If showing more than one slide per page, set how much space should be between each slide.
    • Show Arrows? [Boolean]
    • Show Pagination Dots? [Boolean]
    • Show Overflow? [Boolean]If checked, the previous and next page will be visible on the outside edge of the slider.
    • List Padding _[Group]
      _Used to partially show previous/next slides.
      • Left [Number]
      • Right [Number]

How to Use Slider Components in the Rubric Theme

The slider module group provides comprehensive controls for creating dynamic, interactive content carousels throughout your HubSpot pages. These settings apply to any module that incorporates slider functionality, allowing you to display multiple pieces of content—such as testimonials, featured articles, or image galleries—in an engaging, space-efficient format.

When configuring your slider in the HubSpot page editor, you’ll find these options in the module’s settings panel after adding the component to your page. The responsive groups are particularly powerful, letting you create different experiences for desktop, tablet, and mobile users without requiring separate modules or custom CSS.

Best practices for educational and resource-heavy sites:

For course catalogs or program showcases, set your desktop view to show 2-3 slides per page with minimal spacing to create a browsable grid effect. Use the Loop carousel type to allow continuous navigation through your offerings.

For event highlights or news feeds, consider using the Fade transition type with a single slide per page to create a more dramatic, attention-grabbing presentation. Enable pagination dots to help users track their progress through the content.

The overflow option works exceptionally well for testimonials or student spotlights—showing partial previews of adjacent slides encourages users to continue exploring. Combine this with appropriate list padding to control exactly how much of the neighboring content remains visible.

Remember that the Slider Label field is crucial for accessibility compliance, especially important for educational institutions. Use descriptive text like “Student testimonials carousel” or “Upcoming events slider” to help screen readers provide context to visually impaired users navigating your site.