Configure General Settings for All Sliders in Layered Slider Module

The Layered Slider module offers a versatile solution to create stunning sliders for your PrestaShop store, complete with 2D, 3D, and HTML5/CSS3 transition effects. To ensure a consistent appearance and functionality across your sliders, it’s important to configure the general settings effectively.

This guide organizes and explains the key settings, grouped by their functionality, to make setup quick and easy.

Slider Layout and Display Options

These settings define the basic structure and placement of your slider:

Slider type:

• Auto size: Adjusts the slider size dynamically based on its content.
• Box: Specify fixed dimensions (width and height).
• Full width: Expands the slider to the entire page width, ideal for large banners.

Hook to:

• Default Hook: Utilizes standard PrestaShop hooks for display.
• Custom Hook: Insert {hook h='displayMLS'} into your template to position the slider anywhere on your site.

Design and Appearance

Control the slider's visual elements to align with your website’s design:

• Slider background color: Set a color that complements your site’s theme.
• Slider buttons color: Customize the color of navigation buttons for consistency.
• Custom CSS: For unique customization, add personalized styles to the slider. Use variables like [bg_color] and [button_color] to match slider settings.

Dimensions and Structure

These settings are critical for ensuring sliders are displayed properly:

• Slide width (px): Defines the width of each slide (for "Box" slider type).
• Slide height (px): Sets the height of each slide (for "Box" slider type).

Behavior and Transition Controls

Fine-tune how your slider behaves and transitions between slides:

• Move in (ms): Duration for a slide to enter the viewport.
• Move out (ms): Duration for a slide to exit the viewport.
• Stand duration (ms): The time a slide stays visible before transitioning.
• Autoplay: Enable automatic slide transitions.
• Enable running status bar: Show a progress bar indicating the time left for the next transition.
• Pause when hover: Pause slide transitions when a user hovers over the slider.
• Loop: Enable continuous cycling of slides.

Navigation and Interaction

Enhance user interaction with intuitive navigation options:

• Enable "Next"/"Prev" buttons: Add or remove "Next" and "Previous" buttons for manual navigation.
• Enable slider pagination buttons: Include pagination buttons to allow users to jump to specific slides.

Performance Enhancements

Settings to improve the slider’s loading behavior:

• Display loading icon: Shows a loading indicator while the next slide is prepared, ideal for heavy content sliders.

Configuring the general settings for the Layered Slider module enables you to create visually appealing, responsive sliders tailored to your PrestaShop store. By organizing these options into clear categories, you can easily adjust layouts, visuals, transitions, and navigation to align with your website’s design and functionality.

For advanced customizations, explore the module's additional settings or contact our support team for assistance.