How to Create a Basic Swiper Slider Using Style1 in WordPress

Tutorial Objective

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

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 Pack

1. Log in to your WordPress Dashboard.
2. Go to Swiper Sliders → Add New Slider Pack.
3. Enter a name for your slider (e.g., “Home Slider”).
   • The name will automatically generate a slider-name (e.g., home-slider).
   • This name is used in the shortcode.
4. Under Slider Settings:
   • Style: Select 1 (Style1).
   • Height: Set slider height (e.g., 500px, or leave empty for auto-height).
   • Navigation Buttons: Check to show prev/next arrows.
   • Pagination: Check to show dot navigation at the bottom.
   • Autoplay: Check for automatic sliding.
   • Loop: Check for infinite loop playback.
   • Thumbnails: Check to show thumbnail navigation.

---

Step 2: Add Slide Content

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

Required Fields

• Background Image: Upload or paste an image URL.
  • Recommended: high-resolution image (1920×1080 or higher).
  • Supports both relative and absolute paths.

Optional Fields

• Video: Paste a YouTube link (e.g., https://www.youtube.com/watch?v=dQw4w9WgXcQ).
  • Video will override the background image.
  • Supports autoplay and mute controls.
• Title: Main slide title (e.g., “Welcome to Our Website”).
• Subtitle: Slide subtitle (e.g., “Providing Premium Services”).
• Description: Detailed text (supports shortcodes and HTML tags).
• Link Text: Button label (e.g., “Learn More”).
• Link URL: Button destination URL (e.g., https://example.com/about).
• Thumbnail: Optional, for thumbnail navigation.
  • If left blank, the background image will be used automatically.

3. Repeat steps 1–2 to add more slides (3–5 slides recommended).

---

Step 3: Customize Style (Optional)

Go to the Text Style Tab

Text Color

• White: Best for dark backgrounds.
• Black: Best for light backgrounds.
• Gray: Best for medium-brightness backgrounds.

Text Alignment

• Default: Center
• 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 Sizes

• 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 / Button Style

• Link Padding: e.g., 11px 21px
• Link Border Radius: e.g., 980px (pill-shaped 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 names (e.g., Roboto, Open Sans).
• Separate multiple fonts with commas.
• Use preset font links for quick setup.

Enable Text CSS Animation

• Check to activate text animation effects.
• Recommended for dynamic presentations.

---

Go back to the Slider Settings Tab

Slides Per View on PC / PAD

• Set how many slides show at once on desktop/tablet.
• Options: 1–10 or auto.
• Leave empty for default.

Content Box Max Width

• Set maximum width for the text/content box.
• Example: 100% or 800px.
• Leave empty for default.

---

Step 4: Save & Embed Into Page

1. Click Save Slider Pack.
2. Copy the generated shortcode:
   • By ID: [swiper-slide id="123"]
   • By name: [swiper-slide name="home-slider"]
3. Edit the target page or post.
4. Paste the shortcode into the editor.
5. Update the page/post.

---

Step 5: Verify Functionality

1. Visit the front-end page to view the slider.
2. Confirm these features work:
   • ✅ Background image displays correctly
   • ✅ Video (if used) plays normally
   • ✅ Text content shows properly
   • ✅ Navigation buttons switch slides
   • ✅ Pagination dots display and are clickable
   • ✅ Autoplay works (if enabled)
   • ✅ Loop works (if enabled)
   • ✅ Thumbnails display correctly (if enabled)
   • ✅ Responsive layout works on all devices

---

Advanced Features

Dynamic Content Loading

1. Go to the Dynamic Content tab.
2. Clear Slides: Click to erase manually added slides.
3. Dynamic Content Type:
   • Empty: Use manual content.
   • Post: Auto-load posts.
   • Products: Auto-load products.
4. Dynamic Content Category:
   • Shows post categories if Post is selected.
   • Shows product categories if Product is selected.
   • Check desired categories; they will auto-populate the field.
   • Separate multiple categories with commas.
   • Leave empty to load all categories.
5. Content Count: Set number of posts/products to load (1–100).

Shortcode Usage

• By ID: [swiper-slide id="123"]
• By name: [swiper-slide name="home-slider"]
• Both can be used; ID takes priority.

Custom CSS Variables

All style settings are converted into inline CSS variables, for example:

.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. Full-width slider: Supports auto and 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, buttons, overlay, etc.
6. Animation effects: Supports CSS text animations.
7. Navigation: Buttons, pagination, and thumbnails.

Default Style

• Text color: White (for dark backgrounds)
• Text alignment: Centered
• 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 the image URL is correct.
2. Ensure supported formats: JPG, PNG, GIF, WebP.
3. Verify file permissions.

Video Not Playing

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

Text Hard to Read

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

Responsive Issues

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

Shortcode Not Working

1. Confirm slider pack is saved.
2. Check shortcode syntax.
3. Ensure slider pack status is Published.

---

Technical Logic

Style1 implements these core features:

1. CSS variable system for deep customization.
2. Responsive layout using Flexbox.
3. Multimedia overlay for video/image layer control.
4. Navigation system: buttons, pagination, thumbnails.
5. Animation support 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
• Aspect ratio: 16:9 or 21:9

Content Recommendations

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

Performance Optimization

• Compress images before upload.
• Enable browser caching.
• Use a CDN for faster image delivery.
• Limit slides to 3–5.

---

Summary

With this tutorial, you can build a professional Swiper slider in 10 minutes using Style1. It offers rich customization to match almost any design requirement.

---

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