Tutorial: Create a Basic Swiper Slider Using Style1 in WordPress

Tutorial Goal

Learn how to create a basic Swiper slider in WordPress within 10 minutes, using Style1 to achieve a professional image/video display.

Preparation

1. Make sure the Swiper Manager plugin is installed and activated
2. Prepare images for display (recommended size: 1920×1080 or higher)
3. Prepare optional YouTube video links

Step 1: Create a Slider Group

1. Log in to the WordPress Dashboard
2. Click “Swiper Slides” → “Add New Slider Group”
3. Enter the gallery name, e.g., “Home Slider”
   • • The gallery name will auto-generate a slider-name (e.g., home-slider)
     • This name is used in the shortcode:
   [swiper-slide id=”425″]
4. In “Slider Settings”:
   • Style: Select “1” (Style1)
   • Height: Set slider height (e.g., 500px, or leave empty for auto)
   • Navigation Buttons: Check to show prev/next buttons
   • Pagination: Check to show dot navigation at the bottom
   • Autoplay: Check to auto-switch slides
   • Loop: Check to enable loop playback
   • Thumbnails: Check to show thumbnail navigation

Step 2: Add Slide Content

1. Click the “Add Slide” button
2. Fill in “Slide Content”:

   Required Fields:

   • Background Image: Upload or paste image URL
     • High-resolution image recommended (1920×1080 or higher)
     • Supports relative and absolute paths

   Optional Fields:

   • Video: Paste YouTube video link (e.g., https://www.youtube.com/watch?v=dQw4w9WgXcQ)
     • Video will override the background image
     • Supports autoplay and mute controls
   • Title: Main slide heading
     • E.g., “Welcome to Our Website”
   • Subtitle: Slide subtitle
     • E.g., “Providing the Best Quality Service”
   • Description: Detailed text
     • Supports shortcodes and HTML tags
   • Link Text: Button text
     • E.g., “Learn More”
   • Link URL: Button target URL
     • E.g., https://example.com/about
   • Thumbnail: Optional, for thumbnail navigation
     • If empty, background image will be used automatically
3. Repeat Steps 1–2 to add more slides (3–5 recommended)

Step 3: Customize Style (Optional)

Switch to the “Text Style” tab

Text Color

• White: For dark backgrounds
• Black: For light backgrounds
• Gray: For medium-brightness backgrounds

Text Alignment

• Default: Centered by default
• Left Top
• Center Top
• Right Top
• Left Center
• Center Center
• Right Center
• Left Bottom
• Center Bottom
• Right Bottom

Overlay Color

• Set overlay color, e.g., rgba(0,0,0,0.3)
• Improves text readability
• Leave empty for default value

Font Size

• Title Font Size: e.g., 24px or 1.5rem
• Subtitle Font Size: e.g., 18px or 1.2rem
• Description Font Size: e.g., 14px or 1rem
• Link Font Size: e.g., 16px or 1.1rem

Link Style

• Link Padding: e.g., 11px 21px
• Link Border Radius: e.g., 980px (pill button)
• Link Text Color: e.g., #000
• Link Text Hover Color: e.g., #000
• Link Background Color: e.g., #f0f0f3
• Link Background Hover Color: e.g., #fff
• Link Border: e.g., none
• Link Border Hover: e.g., none
• Link Hover Transform: e.g., scale(1) translate(0px, 0px)

Google Fonts

• Enter Google Font name, e.g., Roboto, Open Sans
• Separate multiple fonts with commas
• Click preset font links for quick addition

Enable Text CSS Animation

• Check to enable text animation effects
• For dynamic display scenarios

Switch to the “Slider Settings” tab

Slides Per View on PC/PAD

• Set number of slides visible at once on PC/PAD
• Options: 1–10 or auto
• Leave empty for default

Content Box Max Width

• Set max width of the content box
• E.g., 100% or 800px
• Leave empty for default

Step 4: Save & Insert Into Page

1. Click “Save Slider Group”
2. Copy the generated shortcode:
   • By ID format:
   • By name format:
3. Edit the page or post where you want to insert it
4. Paste the shortcode into the editor
5. Update the page/post

Step 5: Verify Functionality

1. Visit the frontend page and check the slider
2. Verify these features:
   • ✅ Background image displays correctly
   • ✅ Video (if used) plays normally
   • ✅ Text content shows correctly
   • ✅ Navigation buttons switch slides
   • ✅ Pagination displays and is clickable
   • ✅ Autoplay works (if enabled)
   • ✅ Loop works (if enabled)
   • ✅ Thumbnails display correctly (if enabled)
   • ✅ Responsive design works on different devices

Advanced Features

Dynamic Content Loading

1. Switch to the “Dynamic Content” tab
2. Clear Slides: Click to clear manually added slides
3. Dynamic Content Type:
   • Empty: Manual content
   • Post: Auto-load posts
   • Products: Auto-load products
4. Dynamic Content Category:
   • Shows post categories when Post is selected
   • Shows product categories when Product is selected
   • Check desired categories to auto-add to the field
   • Separate multiple categories with commas
   • Empty = load all categories
5. Content Count: Set number of posts/products to load (1–100)

Shortcode Usage

• By ID:
• By Name:
• Both methods work; ID takes priority

Custom CSS Variables

All style settings are converted to inline CSS variables, e.g.:

.swiper-manager-container.swiper-style1.swiper-slide-name-home-slider {
    --overlay-color: rgba(0,0,0,0.3);
    --title-font-size: 24px;
    --link-color: #000;
}

Style Features

Core Features of Style1

1. Fullscreen Slider: Supports auto & fixed height
2. Multimedia Support: Background image + video overlay
3. Flexible Layout: 9 text alignment positions
4. Responsive Design: Works on PC, tablet, mobile
5. Highly Customizable: Text, button, overlay, etc.
6. Animation Effects: Supports text CSS animations
7. Navigation: Buttons, pagination, thumbnails

Default Style

• Text Color: White (dark background)
• Text Alignment: Center
• Overlay: rgba(0,0,0,0.3)
• Font Sizes: Title 2em, Subtitle 1.7em, Description 1.2em, Link 17px
• Padding: 2em 20% (center), 2em 30% 2em 10% (left), 2em 10% 2em 30% (right)

Troubleshooting

Images Not Showing

1. Check if image URL is correct
2. Ensure supported format (jpg, png, gif, webp)
3. Check image permissions

Video Not Playing

1. Check YouTube link format
2. Ensure browser allows autoplay
3. Check autoplay and mute settings

Text Hard to Read

1. Increase overlay with Overlay Color
2. Change text color (white/black/gray)
3. Adjust font size

Responsive Issues

1. Check height settings
2. Ensure images fit different devices
3. Test display on various screen sizes

Shortcode Not Working

1. Confirm slider group is saved
2. Check shortcode format
3. Ensure status is “Published”

Technical Logic

Style1 implements these core features:

1. CSS Variable System: High customization via CSS variables
2. Responsive Layout: Flexible text layout using Flexbox
3. Media Overlay: Layer control for video & background image
4. Navigation System: Buttons, pagination, thumbnails
5. Animation Support: Text animation via CSS classes
6. Dynamic Content: Auto-load from WordPress database

Best Practices

Image Recommendations

• Size: 1920×1080 or higher
• Format: JPG (photos), PNG (transparent), WebP (modern)
• File Size: Under 500KB per image
• Ratio: 16:9 or 21:9

Content Tips

• Title: Clear & concise, max 20 characters
• Subtitle: Supplementary info, max 30 characters
• Description: Brief details, max 100 characters
• Link: Clear call-to-action (CTA)

Performance Optimization

• Compress images to reduce file size
• Enable browser caching
• Use CDN for faster image loading
• Limit slides (3–5 recommended)

Summary

With this tutorial, you can quickly build a professional Swiper slider in 10 minutes using Style1 for flexible content display. Style1 offers rich customization options to meet various design needs.

---

Tip: For more options or other style tutorials, check the plugin documentation or contact the developer.