How to Use Swiper Slider in WordPress With or Without a Plugin

Use a Swiper plugin for an easy no-code setup, or add Swiper.js manually for more design and performance control. You can customize navigation arrows, pagination, autoplay, and responsive layouts. The plugin method is best for beginners, while custom code suits advanced WordPress users.

Adding a slider is an effective way to showcase images, products, portfolio projects, testimonials, blog posts, and promotional content without making a page unnecessarily long.

However, searching for a “Swiper Slider WordPress plugin” can be confusing. Swiper is primarily a JavaScript slider library—not one specific WordPress plugin. You can integrate it into WordPress through a Gutenberg block plugin, a page builder, or custom code.

In this guide, you will learn how to use Swiper Slider in WordPress through three practical methods:

• A no-code Gutenberg plugin
• Custom Swiper.js code
• An Elementor HTML widget

You will also learn how to make the slider responsive, accessible, fast, and easier to troubleshoot.

How Do I Use Swiper Slider in WordPress?

To use Swiper Slider in WordPress without coding, install a Swiper-powered block plugin such as WP Swiper, add its carousel block to a page, insert your slide content, and configure navigation, pagination, autoplay, looping, and responsive settings.

Developers can instead add Swiper.js to a child theme or custom plugin, enqueue its CSS and JavaScript files, create the required HTML structure, and initialize the slider with custom JavaScript.

The best method depends on how much control you need and whether you are comfortable editing code.

What Is Swiper Slider?

Swiper is a free, open-source JavaScript library for creating touch-enabled sliders and carousels. It is designed for modern browsers and supports touch gestures, responsive breakpoints, navigation arrows, pagination, autoplay, keyboard control, looping, multiple-slide layouts, and several transition effects.

A basic Swiper slider contains three main elements:

1. A main Swiper container
2. A wrapper containing the slides
3. Individual slide elements

Optional elements can be added for navigation arrows, pagination dots, thumbnails, or scrollbars.

Swiper is not restricted to image sliders. A slide can contain:

• Images
• Headings
• Paragraphs
• Buttons
• Videos
• Product cards
• Testimonials
• Blog posts
• Custom HTML content

This flexibility makes Swiper useful for many types of WordPress websites.

Why Use Swiper Slider in WordPress?

Swiper provides more control than many basic WordPress slideshow tools.

Touch-Friendly Navigation

Visitors can swipe between slides on smartphones and tablets. Desktop users can navigate with arrows, pagination dots, keyboard controls, or mouse dragging.

Responsive Layouts

Swiper supports breakpoint-based settings. You can display one slide on mobile, two on tablets, and three or more on desktop screens.

Flexible Content

You are not limited to uploading images. Depending on your implementation, each slide can contain WordPress blocks, text, buttons, videos, products, testimonials, or custom layouts.

Multiple Navigation Options

You can add:

• Previous and next arrows
• Clickable pagination bullets
• Progress bars
• Scrollbars
• Thumbnail navigation
• Keyboard controls

Customizable Behavior

Swiper can be configured for:

• Autoplay
• Continuous looping
• Slide speed
• Space between slides
• Centered slides
• Vertical movement
• Automatic height
• Free-scrolling carousels
• Multiple rows
• Fade, flip, cube, cards, or coverflow effects

No Required jQuery Dependency

Modern Swiper implementations do not require jQuery, making them suitable for modern WordPress development.

Swiper Slider Plugin vs Custom Code

Choose your implementation method before building the slider.

Consideration	Gutenberg Plugin	Custom Code
Coding required	No	Yes
Setup time	Fast	Longer
Editor experience	Visual block editor	HTML and code files
Customization	Limited to plugin options	Nearly complete control
Maintenance	Plugin developer handles updates	You maintain the integration
Performance control	Depends on the plugin	High
Best for	Beginners and content editors	Developers and custom websites

Use the plugin method when you want to create and edit sliders visually.

Use custom code when you need a highly specific design, dynamic data, conditional asset loading, or advanced Swiper configuration.

Method 1: Add Swiper Slider Using a WordPress Plugin

The easiest no-code approach is to use a Gutenberg-compatible plugin.

For this tutorial, we will use WP Swiper. It adds a carousel block to the WordPress block editor and allows standard WordPress blocks to be placed inside each slide. Its available settings include navigation, pagination, autoplay, looping, responsive breakpoints, vertical sliders, spacing, background images, overlays, and custom navigation icons.

Important: Different Swiper-powered plugins have different interfaces. Do not assume that every plugin creates the same dashboard menu or shortcode.

Step 1: Install the WP Swiper Plugin

Log in to your WordPress dashboard and follow these steps:

1. Navigate to Plugins → Add New Plugin.
2. Enter WP Swiper in the search field.
3. Find the plugin developed by digitalapps.
4. Click Install Now.
5. Click Activate after the installation finishes.

WP Swiper currently works through the block editor rather than requiring a separate “Add New Slider” dashboard screen.

[Screenshot suggestion: WP Swiper installation screen in WordPress]

Step 2: Open a Page or Post

Navigate to Pages or Posts, and then open the content where you want to display the slider.

You can either edit an existing page or create a new one.

Click the block inserter button and search for:

WP Swiper

Select the main carousel block from the search results.

Step 3: Add Your Slides

After adding the carousel block, create the number of slides you need.

Each slide can contain regular WordPress blocks, including:

• Image
• Heading
• Paragraph
• Button
• Cover
• Columns
• Group
• Video
• Custom HTML

For a basic image slider:

1. Add an Image block inside the first slide.
2. Select an image from the Media Library.
3. Add a descriptive alt attribute.
4. Repeat the process for the remaining slides.
5. Reorder the slides when necessary.

For a content slider, combine an image with a heading, description, and call-to-action button.

[Screenshot suggestion: Adding an Image block inside a WP Swiper slide]

Step 4: Configure the Slider Layout

Select the main Swiper block instead of an individual slide. The block sidebar will display the slider-level controls.

Depending on the current plugin version, you may be able to configure:

• Slider direction
• Slides per view
• Slides per group
• Space between slides
• Transition speed
• Centered slides
• Automatic slide width
• Looping
• Free mode
• Overflow
• Initial slide
• Responsive breakpoints

For a standard content carousel, try these settings:

• Slides on mobile: 1
• Slides on tablet: 2
• Slides on desktop: 3
• Space between slides: 20–30 pixels
• Transition speed: 400–600 milliseconds

Always preview the result at different screen widths.

Step 5: Enable Navigation and Pagination

Navigation arrows help visitors move manually between slides.

Pagination shows how many slides are available and which slide is currently active.

Enable one or both of these options:

• Previous and next arrows
• Clickable pagination dots

Use controls with enough contrast against the slide background. Avoid placing arrows where they cover important text or faces in an image.

Step 6: Configure Autoplay

Autoplay can work well for logos, promotions, and simple image presentations. However, it should not move so quickly that visitors cannot read the content.

A practical starting point is:

• Autoplay delay: 5,000–7,000 milliseconds
• Pause on user interaction: Enabled
• Loop: Enabled
• Transition speed: 400–600 milliseconds

Avoid autoplay for slides containing long paragraphs, forms, or information visitors must carefully read.

Step 7: Adjust Individual Slide Settings

Select an individual slide to edit its specific content or appearance.

Depending on the block version, you may be able to configure:

• Background image
• Image focal point
• Overlay color
• Thumbnail
• Slide alignment
• Inner blocks
• Content positioning
• Text and button styling

Use the same image ratio across all slides to prevent distracting height changes.

Step 8: Preview the Slider

Before publishing:

1. Click Preview.
2. Check the desktop layout.
3. Switch to tablet preview.
4. Switch to mobile preview.
5. Test touch or mouse dragging.
6. Click both navigation arrows.
7. Click the pagination dots.
8. Confirm autoplay pauses or behaves correctly.
9. Check that text remains readable.
10. Make sure no content is cut off.

After completing the checks, click Publish or Update.

Does WP Swiper Use a Shortcode?

WP Swiper is primarily a Gutenberg block plugin. You add the slider directly through the WordPress editor.

Some other WordPress slider plugins generate shortcodes, but shortcode formats are plugin-specific. A shortcode such as [swiper_slider id="123"] will not work unless an installed plugin explicitly registers that shortcode.

Never paste a shortcode from an unrelated tutorial without checking the documentation for your chosen plugin.

Method 2: Add Swiper Slider to WordPress Without a Plugin

The custom-code method gives you more control over the design, loading behavior, HTML structure, responsive settings, and slider functionality.

This method is suitable when you:

• Develop custom WordPress themes
• Need a unique slider design
• Want to avoid a dedicated slider plugin
• Need multiple custom sliders
• Want to load assets only on selected pages
• Need dynamic posts or custom post types inside slides

Before editing code: Create a site backup and use a staging environment. Add the code to a child theme or custom functionality plugin so a theme update does not erase your work.

Step 1: Create the Required Files

Inside your child theme, create these files:

your-child-theme/
├── functions.php
└── assets/
    ├── css/
    │   └── custom-swiper.css
    └── js/
        └── custom-swiper.js

You will use:

• functions.php to enqueue the assets
• custom-swiper.css for the design
• custom-swiper.js to initialize the slider

Step 2: Enqueue Swiper CSS and JavaScript

WordPress recommends loading front-end scripts with wp_enqueue_script() through the wp_enqueue_scripts action rather than adding random <script> tags to theme templates. The function also allows WordPress to manage dependencies, versions, footer loading, and supported loading strategies.

Add the following code to the child theme’s functions.php file:

<?php
/**
 * Load Swiper and the custom slider files.
 */
function codecanel_enqueue_swiper_assets(): void {
	// Load the files only on singular posts and pages.
	if ( ! is_singular() ) {
		return;
	}

	wp_enqueue_style(
		'swiper',
		'https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.css',
		array(),
		'14'
	);

	wp_enqueue_style(
		'codecanel-custom-swiper',
		get_stylesheet_directory_uri() . '/assets/css/custom-swiper.css',
		array( 'swiper' ),
		'1.0.0'
	);

	wp_enqueue_script(
		'swiper',
		'https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.js',
		array(),
		'14',
		array(
			'in_footer' => true,
			'strategy'  => 'defer',
		)
	);

	wp_enqueue_script(
		'codecanel-custom-swiper',
		get_stylesheet_directory_uri() . '/assets/js/custom-swiper.js',
		array( 'swiper' ),
		'1.0.0',
		array(
			'in_footer' => true,
			'strategy'  => 'defer',
		)
	);
}
add_action( 'wp_enqueue_scripts', 'codecanel_enqueue_swiper_assets' );

This example loads the slider files on individual posts, pages, and other singular content.

For better performance, you can make the condition more specific:

if ( ! is_page( 'portfolio' ) ) {
	return;
}

You can also replace the page slug with a page ID:

if ( ! is_page( 123 ) ) {
	return;
}

For a production website, consider downloading and hosting the Swiper files inside your own theme or plugin instead of depending permanently on a third-party CDN.

Step 3: Add the Slider HTML

Open the page where you want to display the slider and add a Custom HTML block.

Paste this structure:

<div class="swiper codecanel-swiper" aria-label="Featured projects">
	<div class="swiper-wrapper">

		<article class="swiper-slide">
			<img
				src="https://example.com/wp-content/uploads/project-one.webp"
				alt="Completed website redesign project"
				width="1200"
				height="675"
				loading="eager"
			>
			<div class="swiper-slide-content">
				<h3>Website Redesign</h3>
				<p>A modern website redesign focused on speed and usability.</p>
				<a href="/project-one/">View Project</a>
			</div>
		</article>

		<article class="swiper-slide">
			<img
				src="https://example.com/wp-content/uploads/project-two.webp"
				alt="Mobile application interface project"
				width="1200"
				height="675"
				loading="lazy"
			>
			<div class="swiper-slide-content">
				<h3>Mobile Application</h3>
				<p>A responsive product interface created for mobile users.</p>
				<a href="/project-two/">View Project</a>
			</div>
		</article>

		<article class="swiper-slide">
			<img
				src="https://example.com/wp-content/uploads/project-three.webp"
				alt="Online store development project"
				width="1200"
				height="675"
				loading="lazy"
			>
			<div class="swiper-slide-content">
				<h3>Online Store</h3>
				<p>An optimized ecommerce experience built for conversions.</p>
				<a href="/project-three/">View Project</a>
			</div>
		</article>

		<article class="swiper-slide">
			<img
				src="https://example.com/wp-content/uploads/project-four.webp"
				alt="Business dashboard design project"
				width="1200"
				height="675"
				loading="lazy"
			>
			<div class="swiper-slide-content">
				<h3>Business Dashboard</h3>
				<p>A clear analytics dashboard for monitoring business data.</p>
				<a href="/project-four/">View Project</a>
			</div>
		</article>

	</div>

	<div class="swiper-pagination"></div>

	<button
		class="swiper-button-prev"
		type="button"
		aria-label="View previous slide"
	></button>

	<button
		class="swiper-button-next"
		type="button"
		aria-label="View next slide"
	></button>
</div>

Replace the sample image URLs, text, alt attributes, and links with your own content.

The .swiper, .swiper-wrapper, and .swiper-slide classes are essential parts of the standard Swiper structure. Navigation and pagination elements are optional.

Step 4: Initialize Swiper With JavaScript

Open:

/assets/js/custom-swiper.js

Add this JavaScript:

document.addEventListener('DOMContentLoaded', () => {
	const prefersReducedMotion = window.matchMedia(
		'(prefers-reduced-motion: reduce)'
	).matches;

	const sliders = document.querySelectorAll('.codecanel-swiper');

	sliders.forEach((slider) => {
		const slideCount = slider.querySelectorAll('.swiper-slide').length;

		new Swiper(slider, {
			slidesPerView: 1,
			slidesPerGroup: 1,
			spaceBetween: 16,
			speed: prefersReducedMotion ? 0 : 500,
			loop: slideCount > 3,
			watchOverflow: true,

			autoplay: prefersReducedMotion
				? false
				: {
					delay: 5000,
					disableOnInteraction: true,
					pauseOnMouseEnter: true,
				},

			keyboard: {
				enabled: true,
				onlyInViewport: true,
			},

			a11y: {
				enabled: true,
				prevSlideMessage: 'Previous slide',
				nextSlideMessage: 'Next slide',
				firstSlideMessage: 'This is the first slide',
				lastSlideMessage: 'This is the last slide',
			},

			pagination: {
				el: slider.querySelector('.swiper-pagination'),
				clickable: true,
			},

			navigation: {
				nextEl: slider.querySelector('.swiper-button-next'),
				prevEl: slider.querySelector('.swiper-button-prev'),
			},

			breakpoints: {
				640: {
					slidesPerView: 2,
					spaceBetween: 20,
				},
				1024: {
					slidesPerView: 3,
					spaceBetween: 24,
				},
			},
		});
	});

This setup provides:

• One slide on mobile
• Two slides on tablets
• Three slides on desktop
• Navigation arrows
• Clickable pagination
• Keyboard navigation
• Autoplay
• Reduced-motion support
• Local controls for multiple sliders
• Automatic overflow handling

Swiper supports configuration objects for accessibility, autoplay, breakpoints, navigation, keyboard controls, looping, and other behaviors.

Why Initialize Each Slider Separately?

Using document.querySelectorAll() allows multiple Swiper sliders to work on the same page.

The navigation and pagination selectors are also searched inside each slider container. This prevents the arrow from one slider from accidentally controlling another slider.

Step 5: Style the Slider

Open:

/assets/css/custom-swiper.css

Add:

.codecanel-swiper {
	--swiper-navigation-size: 22px;
	--swiper-pagination-bullet-size: 10px;
	position: relative;
	width: 100%;
	padding: 4px 4px 48px;
	overflow: hidden;
}

.codecanel-swiper .swiper-slide {
	box-sizing: border-box;
	height: auto;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.codecanel-swiper .swiper-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.codecanel-swiper .swiper-slide-content {
	padding: 22px;
}

.codecanel-swiper .swiper-slide-content h3 {
	margin: 0 0 10px;
	font-size: 1.25rem;
	line-height: 1.3;
}

.codecanel-swiper .swiper-slide-content p {
	margin: 0 0 18px;
	line-height: 1.65;
}

.codecanel-swiper .swiper-slide-content a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	text-decoration: none;
}

.codecanel-swiper .swiper-button-prev,
.codecanel-swiper .swiper-button-next {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
	cursor: pointer;
}

.codecanel-swiper .swiper-button-prev:focus-visible,
.codecanel-swiper .swiper-button-next:focus-visible,
.codecanel-swiper .swiper-pagination-bullet:focus-visible,
.codecanel-swiper a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.codecanel-swiper .swiper-button-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 639px) {
	.codecanel-swiper .swiper-button-prev,
	.codecanel-swiper .swiper-button-next {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.codecanel-swiper *,
	.codecanel-swiper *::before,
	.codecanel-swiper *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

Customize the spacing, borders, shadows, typography, and button appearance to match your WordPress theme.

Step 6: Clear Your Cache and Test

After adding the files:

1. Clear your WordPress caching plugin.
2. Clear the CDN cache if you use one.
3. Clear the browser cache.
4. Open the page in a private browser window.
5. Check the browser console for errors.
6. Test the slider on mobile, tablet, and desktop.
7. Test keyboard navigation.
8. Confirm that all links and buttons are accessible.
9. Confirm that multiple sliders work independently.

Method 3: Add Swiper Slider in Elementor

You can also display a custom Swiper slider inside an Elementor page.

The safest method is to enqueue the Swiper files through your child theme or custom plugin and use Elementor only for the HTML structure.

Step 1: Enqueue the Swiper Files

Use the PHP code from the custom-code method above.

Make sure the loading condition includes the Elementor page where the slider will appear.

For example:

if ( ! is_page( 123 ) ) {
	return;
}

Replace 123 with the ID of your Elementor page.

Step 2: Add an HTML Widget

Open the page with Elementor and drag an HTML widget into the desired section.

Paste the slider HTML structure into the widget.

Do not add separate <script> tags for Swiper inside every HTML widget. Loading the library through WordPress’s enqueue system is easier to maintain and reduces the risk of loading duplicate files.

Step 3: Add the Custom CSS and JavaScript

Keep your CSS inside:

/assets/css/custom-swiper.css

Keep the initialization script inside:

/assets/js/custom-swiper.js

Update the page and preview it on the front end.

If you use an Elementor add-on that already provides a Swiper-powered widget, follow that plugin’s exact documentation instead. The controls and available features will depend on the specific add-on.

How to Create Different Types of Swiper Sliders

Once Swiper is working, you can adapt the slide content for different purposes.

Swiper Image Slider

Use one large image per slide.

An image slider works well for:

• Photography
• Travel galleries
• Event photos
• Interior design
• Real estate
• Restaurant dishes

Use consistent image dimensions to avoid layout shifts.

WordPress Content Carousel

Place an image, title, description, and button inside each slide.

A content carousel can display:

• Services
• Features
• Case studies
• Courses
• Team members
• Upcoming events

Testimonial Swiper Slider

Each slide can contain:

• Customer quotation
• Customer name
• Role or company
• Profile image
• Rating
• Case study link

Keep testimonials concise and provide enough time for visitors to read them before autoplay advances.

Blog Post Slider

A blog carousel can display:

• Featured image
• Post title
• Category
• Short excerpt
• Publication date
• Read-more link

Developers can generate the slides dynamically with WP_Query rather than entering each post manually.

WooCommerce Product Carousel

A product slider can show:

• Product image
• Product title
• Price
• Rating
• Sale badge
• Add-to-cart button

For dynamic product data, use a WooCommerce-compatible carousel plugin or build the slide markup through a custom WordPress query.

Logo Carousel

A logo slider is useful for displaying:

• Clients
• Sponsors
• Technology partners
• Certifications
• Media mentions
• Supported payment methods

Use optimized SVG, WebP, or PNG files and provide meaningful alt text.

Portfolio Slider

Portfolio slides can contain:

• Project image
• Project title
• Service category
• Short result
• Project details link

A Swiper portfolio carousel is particularly useful for agencies, designers, photographers, architects, event planners, and developers.

When Swiper Is Not the Right Tool

Swiper works well for moving between separate slides. It is not designed specifically for dragging a handle across two overlapping images.

For renovation results, photo editing, medical comparisons, design changes, or other side-by-side transformations, use a dedicated before-and-after image comparison slider instead.

Internal link opportunity: Add a contextual link to the WP Before After Image Slider product or a relevant before-and-after slider tutorial.

How to Make Swiper Slider Responsive

A responsive Swiper slider should not simply shrink the desktop layout. It should change the number of visible slides, spacing, text size, and controls according to the available screen width.

Use Responsive Breakpoints

Swiper’s breakpoints option lets you change supported layout settings at specific screen widths.

Example:

breakpoints: {
	640: {
		slidesPerView: 2,
		spaceBetween: 20,
	},
	1024: {
		slidesPerView: 3,
		spaceBetween: 24,
	},
	1280: {
		slidesPerView: 4,
		spaceBetween: 28,
	},
}

The default settings apply below the smallest breakpoint.

Avoid Fixed Slider Heights

A fixed height may cause content to overflow on small screens.

Instead of forcing a height in JavaScript, use:

• Consistent image ratios
• Flexible content padding
• height: auto
• Swiper’s autoHeight option when appropriate

Swiper’s documentation warns that forcing the JavaScript height parameter prevents normal responsive behavior.

Test Long Text

A heading that fits on desktop may wrap onto three or four lines on a narrow screen.

Test:

• Long titles
• Button labels
• Product prices
• Testimonial quotations
• Multilingual text

Keep Controls Easy to Tap

Navigation buttons should have a sufficiently large clickable area. A control can have a small visual icon while still using a larger button container.

Avoid Showing Too Many Mobile Slides

For most card-based sliders, one full slide or approximately 1.1 slides works well on mobile. Showing four tiny cards on a narrow screen makes the content difficult to read and interact with.

Swiper Slider Accessibility Best Practices

A slider should remain usable for visitors who navigate with keyboards, screen readers, reduced-motion settings, or enlarged text.

Add Meaningful Image Alt Text

Describe the image’s purpose instead of stuffing the target keyword into every alt attribute.

Good example:

Responsive ecommerce homepage displayed on a laptop

Weak example:

Swiper slider WordPress image slider carousel plugin

Use an empty alt attribute for purely decorative images:

alt=""

Enable Keyboard Navigation

Keyboard support lets users move through the slider without using a mouse or touch screen.

keyboard: {
	enabled: true,
	onlyInViewport: true,
}

Add Accessible Navigation Messages

Swiper supports accessibility configuration for previous-slide and next-slide messages.

a11y: {
	enabled: true,
	prevSlideMessage: 'Previous slide',
	nextSlideMessage: 'Next slide',
}

Use Visible Focus Styles

Do not remove the focus outline from buttons and links.

Make focus indicators easy to see against both light and dark slide backgrounds.

Respect Reduced-Motion Preferences

Some visitors prefer limited motion. Detect the prefers-reduced-motion setting and disable autoplay or shorten animations for those users.

Give Users Control Over Autoplay

For important or text-heavy sliders, provide a visible pause button or disable autoplay entirely.

Avoid moving content that users cannot stop, especially when slides contain essential instructions.

Keep Text as Real HTML

Do not place important headings, prices, descriptions, or button labels inside an image. Real HTML text is easier to read, resize, translate, and navigate with assistive technology.

How to Optimize Swiper Slider Performance

A slider can affect loading speed when it contains large images, videos, unnecessary scripts, or too many slides.

Compress Every Slider Image

Before uploading an image:

• Resize it to the maximum displayed dimensions
• Compress it
• Remove unnecessary metadata
• Use WebP or AVIF when suitable
• Keep a JPEG fallback when required by your workflow

Do not upload a 5,000-pixel image for a card displayed at 400 pixels wide.

Add Image Dimensions

Include width and height attributes:

<img
	src="project.webp"
	alt="Project dashboard interface"
	width="1200"
	height="675"
>

This helps the browser reserve space before the image finishes loading.

Load the First Important Image Carefully

When the slider is the main hero section, the first visible image may be an important loading element. Avoid lazy-loading that first image without testing the effect.

Use lazy loading for later slides:

<img
	src="project-two.webp"
	alt="Second project"
	width="1200"
	height="675"
	loading="lazy"
>

Avoid Too Many Slides

Do not add 30 slides when most visitors will view only the first three.

Move large collections to a dedicated gallery or archive page.

Load Swiper Only Where It Is Needed

Avoid loading the slider library across the entire website when only one landing page uses it.

Use WordPress conditional functions such as:

is_page()
is_single()
is_singular()
is_front_page()

Avoid Duplicate Swiper Libraries

A theme, page builder, and plugin may each load a slider library.

Duplicate files can cause:

• Increased page weight
• Conflicting CSS
• JavaScript errors
• Different Swiper versions running together
• Broken navigation or autoplay

Check the browser’s Network tab for multiple copies of swiper-bundle.min.js or similar files.

Be Careful With JavaScript Optimization

Delay, defer, combine, or minification tools can improve performance, but an incorrect configuration may initialize your custom script before Swiper becomes available.

When the slider stops working after enabling optimization:

1. Exclude the Swiper library from delay.
2. Exclude the initialization file from delay.
3. Preserve the dependency order.
4. Clear every cache.
5. Test again.

Avoid Heavy Videos in the First Slide

A background video can significantly increase page weight.

Use:

• A compressed poster image
• Click-to-play behavior
• A lightweight preview
• A dedicated video section

Common Swiper Slider Problems and Solutions

Swiper sliders may sometimes stop working because of missing files, incorrect settings, caching issues, or conflicts with themes and plugins. The following solutions will help you identify and fix the most common Swiper Slider problems in WordPress.

Swiper Slider Is Not Displaying

First, inspect the page source and confirm the required HTML classes exist:

swiper
swiper-wrapper
swiper-slide

Then check that the Swiper CSS, Swiper JavaScript, and initialization file are loaded.

Also:

• Clear page and browser caches
• Check the browser console
• Confirm the initialization selector matches the HTML class
• Temporarily disable optimization plugins
• Test for theme or plugin conflicts on staging

“Swiper Is Not Defined” Error

This error usually means the custom initialization script ran before the main Swiper library loaded.

Check that:

array( 'swiper' )

is listed as a dependency of the custom JavaScript file.

Also avoid loading the library asynchronously when another script depends on its execution order.

Slider Shows All Slides in a Vertical List

This usually means the Swiper stylesheet is missing or blocked.

Confirm that:

swiper-bundle.min.css

appears in the Network tab and returns a successful response.

Also check whether a caching or security tool blocked the CDN.

Navigation Arrows Are Not Working

Verify that the HTML contains:

<button class="swiper-button-prev"></button>
<button class="swiper-button-next"></button>

Then confirm the JavaScript uses the correct elements:

navigation: {
	nextEl: slider.querySelector('.swiper-button-next'),
	prevEl: slider.querySelector('.swiper-button-prev'),
}

When multiple sliders share global navigation selectors, the arrows may control the wrong slider. Initialize each slider separately and search for the controls inside its own container.

Pagination Is Not Appearing

Check for this element:

<div class="swiper-pagination"></div>

Then enable pagination:

pagination: {
	el: slider.querySelector('.swiper-pagination'),
	clickable: true,
}

Also check whether custom CSS hides the pagination or places it outside the visible container.

Autoplay Is Not Working

Check that autoplay is enabled:

autoplay: {
	delay: 5000,
	disableOnInteraction: true,
}

Other possible causes include:

• JavaScript errors
• A conflicting optimization plugin
• Reduced-motion settings
• Browser background-tab restrictions
• Only one slide being available
• A plugin-specific autoplay setting being disabled

Loop Mode Is Not Working

Looping requires enough slides for the selected slidesPerView and slidesPerGroup configuration. Swiper may also add blank slides in certain grouped or grid layouts.

If you display three slides at once, add more than three total slides before enabling loop mode.

Slider Is Not Responsive

Check for:

• Fixed widths
• Fixed JavaScript height
• Images without max-width: 100%
• Parent containers with restricted width
• Theme CSS overriding .swiper
• Missing responsive breakpoints

A useful starting rule is:

.codecanel-swiper {
	width: 100%;
	max-width: 100%;
}

Images Are Cropped Incorrectly

The following CSS intentionally crops images to a consistent ratio:

aspect-ratio: 16 / 9;
object-fit: cover;

Use object-fit: contain when the full image must remain visible:

object-fit: contain;
background: #f3f4f6;

Slider Overflows the Page

Check whether a child element has a fixed width larger than the slider.

Add:

.codecanel-swiper,
.codecanel-swiper * {
	box-sizing: border-box;
}

Also confirm that the main slider container uses:

overflow: hidden;

Multiple Swiper Sliders Interfere With Each Other

Do not initialize every slider with one shared global navigation selector.

Use:

document.querySelectorAll('.codecanel-swiper').forEach((slider) => {
	new Swiper(slider, {
		navigation: {
			nextEl: slider.querySelector('.swiper-button-next'),
			prevEl: slider.querySelector('.swiper-button-prev'),
		},
	});
});

This gives each slider its own controls.

Slider Breaks After Enabling Cache or Minification

Clear all caches first.

If the problem remains:

1. Disable JavaScript combination.
2. Exclude Swiper from delayed loading.
3. Exclude the initialization file.
4. Check the file-loading order.
5. Restore one optimization option at a time.

Slider Works in the Editor but Not on the Front End

This can happen when a plugin’s assets are not detected in a custom template.

WP Swiper normally loads its front-end files when it detects its block. It also provides a global-loading option for templates or integrations that cannot be detected automatically.

Check the plugin settings, clear the cache, and inspect the page source for the required CSS and JavaScript.

Best Practices for Using Swiper Slider in WordPress

Follow these guidelines before publishing:

1. Use sliders only where they improve content discovery.
2. Put the most important slide first.
3. Keep headings short and readable.
4. Use clear calls to action.
5. Avoid placing essential information only in later slides.
6. Use the same image ratio throughout the slider.
7. Test the design without autoplay.
8. Optimize every image.
9. Add keyboard controls.
10. Respect reduced-motion preferences.
11. Make navigation buttons easy to tap.
12. Test at real mobile screen widths.
13. Avoid loading duplicate Swiper libraries.
14. Check JavaScript errors after plugin updates.
15. Load slider assets only where they are required.

Conclusion

There are two main ways to use Swiper Slider in WordPress.

The easiest option is a Gutenberg plugin such as WP Swiper. It lets content editors create responsive sliders with regular WordPress blocks and configure common features without writing code.

The custom-code method is better when you need complete control over the slider’s HTML, styling, breakpoints, performance, accessibility, or dynamic content. The same custom structure can also be added to an Elementor HTML widget after the Swiper assets have been correctly enqueued.

Whichever method you choose, focus on more than visual effects. Optimize your images, provide accessible navigation, respect reduced-motion preferences, test multiple screen sizes, and load the slider files only where they are needed.

A well-designed WordPress Swiper slider should help visitors discover content—not make important information harder to find.

Frequently Asked Questions

This page was last edited on 21 July 2026, at 6:39 pm