Core Features

‍

Creating Sliders

New Slider Creation Process:

Launch the App
- Click on Zeltac Slider in your Apps pane
- Click New Slider button
Required Information (Unchangeable Later)
- Slider Name: Enter a unique name for your slider
  - Names are automatically normalized (lowercase, hyphens for spaces)
  - App checks for existing names to avoid conflicts
- Content Type: Choose between:
  - Static: For static content sliders
  - CMS: For dynamic content from Webflow CMS collections
Initial Settings (Changeable Later)
- Slides per View: Number of slides visible at once
- Direction: Horizontal or vertical sliding
- Pagination: Dots/bullets indicators for slide pagination
- Navigation: Arrow or button controls
- Scrollbar: Enable/disable scrollbar
Create Slider
- Click Create Slider button
- App automatically generates all necessary elements in Webflow Designer
- Elements are created with basic styling and functionality

Important Notes:

Slider name and content type cannot be changed after creation
Initial settings can be modified later in the Edit mode
App creates elements with unique CSS classes based on slider name

‍

Slider Settings

Basic Settings Overview:

The app provides comprehensive control over slider behavior through organized setting categories. All settings are applied in real-time and can be modified at any time.

Core Display Settings:

Slides per View:
- Mobile: 1-20 slides or 'auto' option
- Tablet: 1-20 slides or 'auto' option
- Desktop: 1-20 slides or 'auto' option
- Breakpoint-specific values ensure optimal viewing across devices
- 'Auto' Option: Automatically calculates optimal slides based on slide content width/height
- Use 'auto' when slides have varying widths/height or you want responsive behavior
Direction:
- Horizontal: Left-to-right sliding (default)
- Vertical: Top-to-bottom sliding
Space Between:
- Mobile: 0+ pixels between slides
- Tablet: 0+ pixels between slides
- Desktop: 0+ pixels between slides
- Responsive spacing for different screen sizes
- Visual Impact: Creates breathing room between slides for better readability
- Higher values create more separation, lower values create tighter layouts
Slides per Group:
- Mobile: 1-20 slides move together
- Tablet: 1-20 slides move together
- Desktop: 1-20 slides move together
- Useful for carousel-style sliders with multiple visible slides
- Relationship: Should be less than or equal to slides per view for smooth movement
- Example: If showing 3 slides, moving 2 at a time creates a smooth carousel effect

Navigation & Controls:

Pagination Types:
- None: No pagination indicators
- Simple bullets: Basic dot indicators
- Dynamic bullets: Dynamic dot indicators
- Numbered bullets: Numbered dot indicators
- Progressbar: Progress bar indicator
- Fractional numbers: "1/5" style indicators
Navigation Controls:
- None: No navigation buttons
- Arrows: Left/right arrow buttons
- Buttons: Custom button controls
Scrollbar Options:
- Enable/Disable: Show or hide scrollbar
- Draggable: Make scrollbar draggable
- Hide: Hide scrollbar when not in use
- Use Case: Most useful when slides per view is less than total slides
- Provides visual indication of slider progress and allows direct navigation

Additional Behavior Settings:

Autoplay:
- Enable/Disable: Automatic slide progression
- Delay: Time between slides in milliseconds (e.g., 3000 = 3 seconds)
- Automatically advances slides without user interaction
Loop: Enable infinite sliding loop
- Creates seamless continuous sliding experience
- Important: For loop to work properly, you need enough slides
- Requirement: Total slides must be equal to or more than: slides per view + slides per group
- Example: If showing 3 slides at once and moving 2 at a time, you need at least 5 total slides
Transition Speed: Duration of slide transitions in milliseconds
- Controls how fast slides animate between positions
- Typical Values: 300ms (fast) to 1000ms (slow) for smooth transitions
- Lower values create snappy movements, higher values create smooth, elegant transitions
Effect: Choose transition effect (slide, fade, cube, flip, coverflow, creative, cards)
- Each effect creates different visual transitions between slides
- Slide Count Impact: Some effects work better with certain slide counts
- Fade effect works best with 1 slide per view, while cube/coverflow work well with 3+ slides
Centered Slides: Center the active slide within the viewport
- Mobile: Enable/disable for mobile breakpoint
- Tablet: Enable/disable for tablet breakpoint
- Desktop: Enable/disable for desktop breakpoint
- Applies centering behavior for each screen size independently
Animations: Enable Webflow interaction animations on slide elements
- Works only with 'Click' trigger interactions in Webflow
- Add zts-animate attribute to the element you set as the trigger in your Webflow interaction
- Set up first click for fade-in and second click for fade-out in Webflow
- Elements automatically animate when slides become visible/invisible
- watchSlidesProgress is automatically enabled when animations are turned on

Responsive Design:
All breakpoint-specific settings automatically adapt to different screen sizes:

Mobile: 478px and below
Tablet: 479px to 991px
Desktop: 992px and above

Breakpoint System:

Manual Configuration: You set specific values for each breakpoint (mobile, tablet, desktop)
Independent Control: Each breakpoint can have completely different values for:
- Slides per view
- Space between slides
- Slides per group
- Centered slides behavior
Standard Workflow: Changes to breakpoint settings work the same as other options - click Apply, then Publish

‍

Element Management

App Element Management Overview:

The app automatically creates and manages all necessary slider elements in your Webflow Designer. This includes HTML structure, CSS classes, and JavaScript functionality.

Automatic Element Creation:

Main Container: Section element that contains the entire slider structure
Swiper Container: Div block that houses the slides wrapper (controls overflow and positioning)
Slides Wrapper: Div block containing all individual slides (handles flex layout and transitions)
Individual Slides: Multiple div blocks for slide content
Navigation Elements: Arrows, buttons, or pagination (appended to main container)
Scrollbar Elements: Custom scrollbar when enabled (appended to main container)
CSS Classes: Unique styling classes for each slider
JavaScript Integration: Swiper.js functionality with your configuration

Element Updates:

Selective Updates: Only necessary elements are modified when settings change
Style Preservation: Custom styles are maintained when possible
Element Recreation: Some changes require complete element recreation
- Navigation Changes: Switching between arrow/button/none
- Pagination Changes: Changing pagination type
- Scrollbar Changes: Enabling/disabling scrollbar
- Direction Changes: Switching between horizontal/vertical

CSS Class System:

The app creates a comprehensive CSS class system for each slider. All classes use the slider ID as a prefix for uniqueness.

Main Container Element:

{sliderId}: Main slider container (Section element)
- Contains the entire slider structure
- Has custom attribute zts-name for identification
- Includes margins and basic styling

Swiper Container:

{sliderId}-swiper: Swiper container element (Div block)
- Houses the slides wrapper
- Controls overflow and positioning
- Sets the foundation for slider functionality

Slides Wrapper:

{sliderId}-wrapper: Slides wrapper element (Div block)
- Contains all individual slides
- Handles flex layout and transitions
- Has custom attribute zts-wrapper for identification

Individual Slides:

{sliderId}-slide: Individual slide elements (Div blocks)
- Each slide is a separate div block
- Contains slide content (text, images, etc.)
- Responsive sizing based on slides per view

Navigation Classes:

{sliderId}-navigation-next-button: Next navigation button
{sliderId}-navigation-prev-button: Previous navigation button
{sliderId}-navigation-disabled: Disabled navigation state

Pagination Classes:

{sliderId}-pagination: Pagination container
{sliderId}-pagination-bullet: Individual pagination bullet
{sliderId}-pagination-bullet-active: Active pagination bullet
{sliderId}-pagination-progressbar-fill: Progress bar fill (for progressbar type)

Scrollbar Classes:

{sliderId}-scrollbar-nav: Scrollbar navigation element
{sliderId}-scrollbar-drag: Scrollbar drag handle

Swiper Framework Classes:

swiper-wrapper: Swiper's internal wrapper class (added automatically for cube effect)
swiper-slide: Swiper's internal slide class (added automatically for cube effect)

JavaScript Integration:

Swiper.js Integration: Full Swiper.js functionality with your settings
Automatic Code Generation: App writes complete Swiper.js configuration code
Page Script Injection: App automatically adds JavaScript code to your page
Script Management: App handles adding, updating, and removing page scripts
Responsive Behavior: All breakpoint settings are properly applied
Webflow Compatibility: Designed to work seamlessly with Webflow Designer
Performance Optimized: Efficient code generation and updates

Element Styling and Positioning:

Responsive Layout: All elements automatically adapt to different screen sizes
Breakpoint Handling: Styles are generated for each breakpoint (mobile, tablet, desktop)

Style Preservation During Updates:

Custom Style Retention: Your custom Webflow styles are preserved when possible
Selective Updates: Only necessary styles are regenerated based on changes
Element Recreation: Some setting changes require complete element recreation
- What Happens: Old elements are removed and new ones created
- Style Impact: Custom styles are completely lost during recreation
- Recovery: You must restyle from scratch - combo classes are removed
Smart Updates: Settings that don't affect elements update without recreation
- Examples: Changing autoplay delay, transition speed, loop, or effect settings, etc
- Benefit: Your custom styles are preserved because we don't touch elements or styles

‍

Publishing & Updates

Workflow for Applying Changes:

Configure Settings
- Modify any slider setting in the app interface
- Changes are applied to the slider configuration
- App Preview: Changes are visible in the app's local preview (not the actual slider yet)
Apply Changes
- Click Apply button to update the slider
- Background Processing: App updates the page scripts and code in the background
- Element Updates: App modifies existing slider elements in Webflow Designer
Publish to See Changes
- Publish your Webflow site to see the updated slider
- All changes become visible on the live site
- No additional coding or manual updates required

What Happens Behind the Scenes:

Element Updates: App modifies existing slider elements in Webflow Designer
- Selective Changes: Only certain elements/styles change on edit (navigation, pagination, scrollbar, direction, etc.)
- Style Loss Warning: When these elements change, they may lose their previous custom styles
Style Generation: New CSS classes and styles are created/updated
- Selective Updates: Only necessary styles are regenerated based on changes
JavaScript Updates: App removes the previous script from the page and adds the latest script with all changes
- Complete Replacement: Entire slider script is updated, not just modified
- Code Regeneration: Swiper.js configuration is completely rewritten with your new settings
- Script Injection: New JavaScript code is automatically injected into your page
Responsive Handling: Breakpoint-specific settings are properly applied
- Breakpoint Updates: All responsive configurations are updated simultaneously

Important Notes:

Always publish your site after applying changes to see updates
Changes apply immediately to the slider configuration
Element Recreation: Certain setting changes require complete element recreation
- Navigation Changes: Switching between arrow/button/none recreates navigation elements
- Pagination Changes: Changing pagination type recreates pagination elements
- Scrollbar Changes: Enabling/disabling scrollbar recreates scrollbar elements
- Direction Changes: Switching between horizontal/vertical recreates slider structure
All settings are saved automatically as you make changes

Real-Time Updates:

Configuration changes are saved instantly
Element updates happen when you click Apply
App Preview: Changes visible in app interface immediately
Webflow Elements: Elements updated in Webflow Designer after Apply
Live Site: Visual changes appear when you publish your site
No need to restart or refresh the app

‍

App-Specific Features

App Functionality Overview:

Beyond slider configuration, the app provides several features to enhance your workflow and ensure smooth operation.

Preview Mode:

Dummy Slider Preview: Creates a sample slider to demonstrate your current settings
Not Exact Replica: Shows how settings affect slider behavior, not your actual content
Purpose: Helps you understand what each setting change will look like before applying
Use Case: Test different configurations without affecting your actual slider

Unsaved Changes Handling:

Change Tracking: App automatically detects when you modify slider settings
Navigation Guard: Prevents accidentally leaving the page with unsaved changes
Save Prompt: Modal appears asking if you want to save or discard changes
User Experience: Ensures your work is never lost accidentally

Script Validation:

Page Script Check: App verifies that required slider scripts are present on the page
Status Display: Shows script status as present, missing, or unknown
Automatic Handling: Manages script regeneration when needed
Script Injection: Automatically adds missing scripts to your page
Code Verification: Ensures JavaScript code matches your current slider configuration
Functionality Assurance: Ensures your slider works properly on the published site

Breakpoint Selector:

Global Control: Single breakpoint selector for all responsive slider settings
Current Breakpoint Display: Shows active breakpoint (mobile/tablet/desktop)
Webflow Integration: Automatically syncs with Webflow Designer breakpoint changes
Preview Integration: Preview slider immediately reflects breakpoint-specific settings

Breakpoint System:

Mobile: 478px and below
Tablet: 479px to 991px
Desktop: 992px and above

Integration Features:

Webflow Auto-Sync: Automatically detects Webflow Designer breakpoint changes
Manual Selection: Users can manually select breakpoints to configure responsive settings
Preview Integration: Preview slider immediately shows breakpoint-specific behavior

User Workflow:

Select Breakpoint: Choose mobile/tablet/desktop from the app's selector or from Webflow breakpoint selector
Configure Settings: Adjust responsive options for the selected breakpoint:
- Display & Layout: slidesPerView, slidesPerGroup, spaceBetween, direction, centeredSlides
- Navigation & Controls: navigation, pagination, scrollbar
- Touch & Interaction: allowTouchMove
- Free Mode: freeMode settings
- Effects & Transitions: effect, speed, watchSlidesProgress, zoom
- Behavior: loop, rewind, autoHeight, slideToClickedSlide
- Autoplay: autoplay settings
- Thumbs: thumbs configuration
Preview Changes: See immediate updates in the preview slider
Apply & Publish: Apply changes and publish to see on live site

Use Cases:

Configure different/responsive options for mobile vs desktop
Test responsive behavior before publishing
Ensure optimal viewing across all device sizes

‍