Slider

Creating a slider on your website is a fantastic way to showcase featured content, highlight important information, or dazzle visitors with engaging visuals. The Slider Widget in JupiterX provides a smooth, customizable experience for creating sliders that fit well with your design goals.

View Live Demo

Content tab

Slides

This section allows you to add and manage individual slides. Each slide can have its unique content, such as images or text.

• To add a new slide, click on the '+ Add Item' button.
• To remove a slide, click the 'X' button next to the slide you want to delete.
• For each slide, you can click on the slide title to expand and edit the slide's details.
• Manage your slides with ease, adding new ones or removing existing slides to keep your content fresh and relevant.
• Background:
  • Color: Enhance your slide with a background color that complements or contrasts with your slide elements.
  • Image: Select a captivating background image by uploading a new image or choosing from the media library.
• Content:
  • Title & Description: Write the content for title and description of slide
  • Button Text: Write the content for the button within a slide
  • Link: Indicate where the slide should be linked to
• Style:
  • Custom: Set a custom style that will only affect this specific slide.
• Height: Dictate the specific height of your slider, allowing for precise design control and consistency across different devices and orientations.

Slider Options

Tailor your slider's functionality to enhance the user experience:

• Navigation: Opt for navigational aids, such as arrows or dots, providing users with the ability to control the slide sequence.
• Autoplay: Activate autoplay to cycle through slides automatically, offering a hands-free viewing experience.
• Pause on Hover & Interaction: Implement pause controls upon hover or during any interaction to provide users the time to absorb the content.
• Autoplay Speed: Control the interval between slide transitions during autoplay, creating a pace that suits the flow of your content.
• Infinite Loop: Loop your slideshow for a continuous experience that never ends.
• Transition: Select your slide transition style to match the tone and pace of your site, ensuring smooth movement from slide to slide.
• Transition Speed (ms): Fine-tune the quickness of each transition, accommodating both fast-paced and leisurely content narratives.
• Content Animation: Elevate the experience further by adding animations to content as slides transition, drawing attention and adding flair.

Style Tab

Slides

Adjust the display elements within each slide:

• Content Width: Define the width of the content area relative to the overall slider width for optimal layout and readability.
• Padding: Buffers the content within the slides, setting the stage for your visuals and text to breathe.
• Horizontal Position: Align content left, right, or center along the horizontal axis for balance.
• Vertical Position: Align content top, bottom, or middle along the vertical axis to suit your stylistic preference.
• Text Align: Choose how text within the slide content should be aligned—left, center, or right—for cohesiveness.
• Text Shadow: Embellish your text with a shadow, enhancing legibility, or adding depth to your slides.

Title

Craft titles that pull focus:

• Spacing: Control the title's margins for a clean presentation.
• Text Color: Pick a color that ensures your titles pop against their backgrounds without clashing.
• Typography: Fine-tune your titles' font style to stand out or fit with your brand's identity, including metrics like size, line height, and letter spacing.

Description

Ensure descriptions are legible and well-integrated:

• Spacing: Govern the area around your descriptions for an uncluttered look.
• Text Color: Play with contrasting colors to balance visibility with aesthetics.
• Typography: Choose readable typefaces, adjust sizing, weight, and other typographic properties for clarity.

Button

Buttons should be straightforward and engaging:

• Size: Button size should be proportionate to the content and easy to interact with.
• Typography: Button text requires clear, readable typography primed for action.
• Border Width & Radius: Borders define buttons. Decide on their thickness and corner roundness.
• Text Color: Text within should be distinctly visible, with alternate colors for active/hover states if applicable.
• Background Type: A solid or gradient background can set the tone for user interaction.
• Border Color: Select a border color that complements or contrasts nicely with the button's background.
• Margin: Place your button strategically within the slide using margin adjustments.

Navigation

Navigation controls should be intuitive and minimally invasive:

• Arrows Position: Determine where arrows appear in relation to the slider, ensuring they don't obstruct content.
• Offset Y & X: Fine-tune their position vertically and horizontally.
• Arrows Size: Adjust for functionality and proportion.
• Arrows Color: Choose a color that's recognizable yet subtle.
• Pagination: Configure the position, size, and color of the pagination dots.
  • Position: Place the pagination inside or outside the slider.
  • Offset Y: Move the pagination dots up or down.
  • Offset X: Move the pagination dots left or right.
  • Size: Adjust the size of the pagination dots.
  • Color: Choose a color for the dots.
  • Active Color: Select a color for the active dot representing the current slide.