Seventh > Sections > Slider

Slider

The Slider section creates a full-screen or fixed-height image slider with multiple slides. Each slide can contain text content, images, videos, and buttons. Perfect for hero sections, promotional banners, or featured content displays.

Seventh - Slider

What It Does

This section displays multiple slides in a slider format:

  • Slides automatically transition or can be navigated manually
  • Each slide can contain text, images, videos, and buttons
  • Supports full-screen or fixed aspect ratio heights
  • Background images or videos for each slide
  • Text content overlaid on slides

Section Settings Explained

Slider Height

Height Controls the height of the slider:

  • Natural - Height adjusts to content
  • Fullscreen - Slider fills entire viewport height (default)
  • Ultra Wide (2.33:1) - Very wide aspect ratio
  • Wide (2:1) - Wide aspect ratio
  • Landscape (16:9) - Standard widescreen
  • Standard (3:2) - Standard photo ratio
  • 4:3 - Traditional photo ratio
  • Square (1:1) - Square aspect ratio
  • Portrait (5:6) - Portrait orientation
  • Tall (2:3) - Tall portrait orientation

💡 Tip: On mobile devices, the slider height automatically adjusts for better viewing.

💡 Note: If the inner content is taller than the slider height, the slider will expand to fit the content.

Parallax Effect

Parallax Effect Adds a scrolling parallax effect to slide backgrounds:

  • None - No parallax effect
  • Subtle - Gentle parallax movement
  • Medium - Moderate parallax movement (default)
  • Strong - Pronounced parallax movement

Slide Options

Each slide in the slider is a Slider Slide block with these options:

Media Options

Background Image/Video

  • Upload an image or video for the slide background
  • Supports both images and videos
  • Image/video fills the entire slide area

Hide Media

  • When enabled: Hides the background image/video
  • When disabled: Shows the background media

Overlay

  • Add a color overlay on top of the background
  • Adjust transparency for better text readability
  • Helps text stand out over images

Content Layout

Vertical Alignment Controls how content aligns vertically within the slide:

  • Top - Content aligns to the top
  • Center - Content aligns to the center (default)
  • Bottom - Content aligns to the bottom

Justify Content Controls how content spreads horizontally:

  • Start - Content aligns to the left
  • Center - Content aligns to the center
  • End - Content aligns to the right
  • Between - Content spreads with space between
  • Around - Content spreads with space around

Content Width Controls how wide the text content area is:

  • Small (50%) - Narrow content area
  • Medium (70%) - Standard content area (default)
  • Full (100%) - Full width content area

Text Alignment

  • Align text to left, center, or right

Text Spacing

  • Controls gap between text blocks inside the slide
  • Options: XXSmall, XSmall, Small, Regular, Large, XLarge

Slide Styling

Color Scheme

  • Apply theme color schemes to the slide
  • Affects text and button colors

Available Blocks in Slides

Each slide can contain any of these blocks:

Common Blocks:

  • Heading
  • Text
  • Button
  • Icon
  • Divider
  • Empty Space
  • Caption
  • Star Rating
  • Group (to organize multiple blocks)

Special Blocks:

  • Custom (for custom HTML/Liquid)
  • App blocks (from installed apps)

Common Use Cases

Hero Slider

  • Create full-screen hero sections
  • Showcase featured products or promotions
  • Use multiple slides for rotating content
  • Perfect for homepage hero areas

Promotional Banners

  • Display sale announcements
  • Highlight special offers
  • Use fixed height for consistent display
  • Great for seasonal promotions

Brand Storytelling

  • Tell your brand story across multiple slides
  • Use images and text to create narratives
  • Full-screen for immersive experience
  • Perfect for "About Us" sections

Product Features

  • Showcase product features
  • Use images and text to highlight benefits
  • Multiple slides for different features
  • Great for product detail pages

Tips for Success

Slide Height

  • Fullscreen - Use for hero sections and immersive experiences
  • Fixed Aspect Ratios - Use for consistent display across pages
  • Natural - Use when content height varies significantly

Content

  • Text Readability - Use overlays to ensure text is readable
  • Content Width - 70% works well for most content
  • Alignment - Center alignment works well for hero-style slides

Images & Videos

  • High Quality - Use high-resolution images for best results
  • Aspect Ratios - Match image aspect ratios to slider height
  • Video Backgrounds - Use videos for dynamic, engaging slides

Parallax

  • Subtle - Use for gentle, professional effect
  • Strong - Use for dramatic, eye-catching effect
  • Performance - Consider performance impact on mobile devices

Troubleshooting

Slides Not Transitioning

Problem: Slides don't automatically change.

Solutions:

  1. Check Slide Count - Ensure multiple slides are added
  2. JavaScript - Verify theme JavaScript is loading
  3. Browser Support - Check browser compatibility

Text Not Readable

Problem: Text is hard to read over background images.

Solutions:

  1. Add Overlay - Increase overlay opacity
  2. Text Color - Adjust text color for contrast
  3. Background - Use darker or lighter background images

Slider Height Issues

Problem: Slider height doesn't look right.

Solutions:

  1. Check Height Setting - Verify height option is appropriate
  2. Content Height - Slider expands if content is taller
  3. Mobile - Check mobile display separately

Images Not Fitting

Problem: Background images don't fill the slide properly.

Solutions:

  1. Image Size - Use images that match slider aspect ratio
  2. Image Quality - Use high-resolution images
  3. Aspect Ratio - Match image ratio to slider height setting
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.