Advanced Features

‍

Advanced Slider Features

Advanced Settings Overview:

The app provides extensive advanced controls organized in collapsible sections. These settings offer fine-tuned control over slider behavior, interactions, and visual effects.

Navigation Controls:

• Allow Touch Move: Enable or disable touch/swipe gestures
  • When disabled, slider cannot be swiped on any device
  • Use Case: Disable for presentation-style sliders where you want full control
• Keyboard Control: Enable keyboard navigation (arrow keys, spacebar)
  • Allows users to navigate with keyboard for accessibility
  • Use Case: Enable for better user experience and accessibility compliance
• Mousewheel Control: Navigate slides with mouse wheel scrolling
  • Users can scroll through slides using their mouse wheel
  • Use Case: Useful for long content sliders or portfolio galleries
• Simulate Touch: Accept mouse events as touch events on non-touch devices
  • Enables click-and-drag functionality on desktop computers
  • Use Case: Provides touch-like experience on desktop devices
• Grab Cursor: Show grab cursor when hovering over draggable areas
  • Visual indicator that slider can be dragged
  • Requirement: Only works when touch move is enabled
  • Use Case: Improves user experience by indicating interactivity

Autoplay Options:

• Disable Autoplay on Interaction: Permanently disable autoplay when user interacts with slider
  • Once disabled, autoplay will not resume automatically unless page is reloaded
  • Use Case: Give users full control after they interact with the slider
• Pause on Mouse Enter: Pause autoplay when mouse hovers over slider
  • Gives users time to read content
    without autoplay interruption. Autoplay resumes when mouse leaves the slider area
  • Use Case: Improve user experience for content-heavy sliders
• Stop on Last Slide: Stop autoplay when reaching the final slide
  • Prevents autoplay from continuing indefinitely
  • Use Case: Create a natural stopping point for content
• Reverse Autoplay Direction: Change autoplay direction
  • Autoplay moves backward instead of forward
  • Use Case: Create unique visual effects or reverse content flow

Pagination Options:

• Clickable Pagination: Allow navigation by clicking pagination bullets
  • Users can jump directly to any slide by clicking pagination
  • Requirement: Only works with 'bullets' pagination type
  • Use Case: Improve navigation for sliders with many slides
• Dynamic Main Bullets: Number of main bullets to display
  • Controls how many main pagination bullets are visible at once
  • Range: 1-6 bullets
  • Requirement: Only works with 'dynamic' pagination type
  • Use Case: Manage pagination display for sliders with many slides.

Free Mode:

• Free Mode: Enable free-form sliding without snap-to-slide behavior
  • Slides move freely without stopping at specific positions
  • Use Case: Create more natural, fluid sliding experiences
• Sticky Free Mode: Enable snap-to-slide positions in free mode
  • Combines free movement with controlled stopping points
  • Use Case: Balance freedom with precision
• Momentum Free Mode: Keep slides moving after release
  • Slides continue moving based on swipe momentum
  • Use Case: Create smooth, physics-based interactions
• Minimum Velocity: Required velocity to trigger momentum
  • Controls sensitivity of momentum behavior
  • Range: 0.01 to 1.0
  • Default: 0.02
  • Use Case: Fine-tune momentum sensitivity

Slide Behavior:

• Auto Height: Automatically adjust slider height to match active slide
  • Slider height changes based on current slide content
  • Use Case: Accommodate slides with varying heights
• Slide to Clicked Slide: Navigate to clicked slide
  • Users can click directly on any slide to navigate to it
  • Use Case: Improve navigation for sliders with multiple visible slides
• Initial Slide: Set which slide to show first
  • Control the starting position of the slider
  • Range: 0 to total slides minus 1
  • Use Case: Start slider at specific content or create custom entry points
• Rewind: Enable sliding from last to first slide and vice versa
  • Creates circular navigation without loop mode
  • Conflict: Cannot be used with loop mode
  • Use Case: Alternative to loop mode for specific navigation patterns

Visual Effects:

• Parallax: Enable parallax scrolling effect
  • Creates depth and movement effects during slide transitions
  • Requirement: Needs additional configuration in slide elements
  • Documentation: Swiper.js Parallax Documentation
  • Basic Setup: Add data-swiper-parallax attributes to elements with values like -100, 200, etc.
  • Example: data-swiper-parallax="-100" moves element 100px left, data-swiper-parallax="200" moves it 200px right
  • Use Case: Add visual interest and modern effects
• Zoom: Enable zoom functionality on slides
  • Allows users to zoom into slide content
  • Requirement: Needs additional configuration in slide elements
  • Documentation: Swiper.js Zoom Documentation
  • Basic Setup:
  Wrap zoomeable image with a div with `swiper-zoom-container` class.
  • Use Case: Image galleries or detailed content viewing
• Watch Slides Progress: Track slide progress and visibility
  • Enables progress tracking and visibility classes
  • Requirement: Required for thumbs and controller functionality
  • Use Case: Enable advanced features like thumbnail navigation

Thumbs:

• Enable Thumbs: Create thumbnail navigation for main slider
  • Secondary slider acts as thumbnail navigation
  • Use Case: Image galleries, product showcases, portfolio presentations
• Thumbs Slider: Select which slider to use as thumbnails
  • Links main slider with thumbnail navigation
  • Use Case: Synchronize main content with thumbnail previews
• Auto Scroll Offset: Automatic scrolling offset for thumbnails
  • Controls how thumbnails scroll to keep active thumb visible
  • Use Case: Ensure active thumbnail is always visible
• Multiple Active Thumbs: Allow multiple thumbnails to be active
  • Multiple thumbnails can show as active simultaneously
  • Use Case: Show range of active content

Controller:

• Enable Controller: Synchronize this slider with another slider
  • Creates linked behavior between two sliders
  • Use Case: Primary-secondary slider relationships, synchronized presentations
• Control Slider: Select which slider to control
  • Choose the slider that this slider will control
  • Use Case: Create coordinated slider experiences
• Control Method: Choose how control is applied
  • Slide: Control by slide position
  • Container: Control by container position
  • Use Case: Different synchronization behaviors
• Inverse Control: Invert control direction
  • Controlled slider moves in opposite direction
  • Use Case: Create contrasting or complementary movements

‍

Custom Parameters

Custom Parameters Overview:

The app allows you to add custom Swiper.js parameters that aren't available in the standard interface. This gives you access to advanced Swiper.js functionality.

How to Add Custom Parameters:

1. Enable Custom Parameters: In the Advanced Settings section, expand the "Custom Parameters" accordion
2. Add New Parameter: Click to add a new custom parameter
3. Configure Parameter:
   • Key: The Swiper.js parameter name (e.g., grabCursor, simulateTouch)
   • Type: Choose from string, number, or boolean
   • Default Value: Set the initial value for the parameter
   • Current Value: The active value (can be different from default)

How Custom Parameters Work:

• Direct Integration: Parameters are passed directly to Swiper.js configuration
• Default Handling: If you don't change the default value, the parameter isn't added to config as it is already added by default
• Nested Properties: Use dot notation for nested Swiper.js options (e.g., navigation.enabled, pagination.clickable)
• Parameter Validation: App validates parameter types and values before applying
• Real-time Updates: Changes apply immediately when you click Apply
• Persistence: Custom parameters are saved with your slider configuration
• Workflow: Configure → Apply → Publish to see changes (same as other features)

Available Parameters:

For a complete list of available Swiper.js parameters, refer to the Swiper.js API Documentation.

Use Cases:

• Advanced Swiper.js Features: Access features not in the standard interface
• Custom Behaviors: Fine-tune slider behavior beyond standard options
• Integration Requirements: Meet specific project requirements
• Future-Proofing: Add new Swiper.js features as they become available

Transition Effects

Transition Effects Overview:

The app provides access to Swiper.js transition effects that create different visual experiences when moving between slides.

Available Effects:

• Slide: Standard horizontal/vertical sliding (default)
  • Most common and reliable effect
  • Works well with all slide counts and content types
  • Best for general-purpose sliders
• Fade: Cross-fade transition between slides
  • Creates smooth fade in/out effect
  • Best Used With: 1 slide per view
  • Ideal for image galleries and presentation-style sliders
  • Creates elegant, cinematic transitions
  • Options:
    • Cross Fade: Enable smooth cross-fade between slides (boolean: true/false)
• Cube: 3D cube rotation effect
  • Slides rotate as a 3D cube
  • Best Used With: 3+ slides per view
  • Creates modern, engaging visual experience
  • Adds depth and dimension to your slider
  • Options:
    • Shadow: Enable shadow on the cube for depth (boolean: true/false)
    • Slide Shadows: Enable shadows on individual slides (boolean: true/false)
    • Shadow Offset: Distance of shadow from cube (number: 0-100)
    • Shadow Scale: Size and intensity of shadow (number: 0-1)
• Flip: 3D flip effect
  • Slides flip like playing cards
  • Best Used With: 1-2 slides per view
  • Creates dynamic, card-like transitions
  • Ideal for portfolio showcases and product displays
  • Options:
    • Slide Shadows: Enable shadows on flipped slides (boolean: true/false)
    • Limit Rotation: Restrict rotation to prevent over-rotation (boolean: true/false)
• Coverflow: 3D coverflow effect
  • Slides flow over each other with perspective
  • Best Used With: 3+ slides per view
  • Creates magazine-style coverflow experience
  • Perfect for image galleries and media sliders
  • Options:
    • Rotate: Control slide rotation angle (number: 0-360 degrees)
    • Stretch: Control slide stretching effect (number: 0-100)
    • Depth: Control 3D depth perception (number: 0-1000)
    • Scale: Control slide scaling (number: 0-1)
    • Modifier: Fine-tune the coverflow effect (number: 0-1)
    • Slide Shadows: Enable shadows for depth (boolean: true/false)
• Creative: Custom transform effects
  • Highly customizable slide transformations
  • Best Used With: 1-2 slides per view
  • Allows custom rotation, scale, and movement
  • Create unique, branded transition experiences
  • Options:
    • Perspective: Enable 3D perspective (boolean: true/false)
    • Limit Progress: Control animation progress limits (number: 0-1)
    • Shadow Per Progress: Dynamic shadows based on animation progress (boolean: true/false)
    • Progress Multiplier: Control animation speed multiplier (number: 0.1-10)
    • Previous/Next Transform: Custom transform options for previous and next slides
      • Translate: Custom movement patterns (string: "X Y Z" format)
      • Rotate: Custom rotation values (string: "X Y Z" format)
      • Opacity: Custom transparency levels (number: 0-1)
      • Scale: Custom sizing effects (number: 0-2)
      • Shadow: Enable/disable shadows (boolean: true/false)
      • Origin: Custom transform origin points (string: "X Y Z" format)
• Cards: Card stack effect
  • Slides stack like a deck of cards
  • Best Used With: 3+ slides per view
  • Creates organized, structured visual flow
  • Ideal for content-heavy sliders and catalogs
  • Options:
    • Per Slide Offset: Control spacing between card slides (number: 0-100)
    • Per Slide Rotate: Control rotation of individual cards (number: 0-360 degrees)
    • Rotate: Enable/disable card rotation (boolean: true/false)
    • Slide Shadows: Enable shadows on cards (boolean: true/false)

Effect Selection Guidelines:

• Performance: 3D effects (cube, flip, coverflow) may impact performance on older devices
• Content Type: Image-heavy sliders work well with fade and coverflow effects
• Slide Count: Some effects work better with specific slide counts
• User Experience: Consider your audience and device compatibility
• Branding: Effects can enhance your brand's visual identity

Effect Configuration:

Each effect has specific configuration options available in the Advanced Settings section. These options allow you to fine-tune the visual behavior of your chosen effect.

Important Notes:

• Effect-Specific Options: Configuration options only appear when the corresponding effect is selected
• Dynamic UI: The interface automatically shows/hides relevant options based on your effect choice
• Performance Impact: 3D effects (cube, flip, coverflow) may impact performance on older devices

‍

Templates (Paid Feature)

Templates Overview:

Templates provide pre-configured slider setups for common use cases, allowing you to quickly create professional sliders without starting from scratch.

Benefits:

• Pre-built Configurations: Ready-to-use slider setups
• Industry-specific Templates: Templates for e-commerce, portfolios, galleries, etc.
• Customizable Templates: Modify template settings to fit your needs
• Template Categories: Organized by use case and industry

How to use:

1. Go to the templates page by clicking "Import Template"
2. Select a templates and click the "Import" button to imports its elements and configuration.
3. Click on "Copy elements" button to copy the elements for the template
4. Paste the elements in your webflow design with 'Ctrl/Cmd + V'. The elements will be places in selected element of body of your webflow design.
5. Click on "Apply config" to apply the slider script to you page.
6. Publish your page to see the imported template.

‍