Created: May 26th 2025
Categories: Wordpress
Author: Aleksandar Pantic

How to Implement Swiper Slider in WordPress – Complete Guide for Developers

Tags: beginner WordPress development, slider

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

What is Swiper Slider?

Swiper is a modern, responsive touch slider used in web development to create mobile-friendly carousels, galleries, and sliders. It is highly customizable, supports both horizontal and vertical slides, and is widely used due to its smooth animations and flexibility.

Why Use Swiper in WordPress?

Responsive Design: Swiper adapts to all screen sizes and supports touch gestures natively.
Customizable: Offers extensive configuration options for pagination, navigation, autoplay, and more.
Performance: Lightweight and optimized for speed, making it ideal for WordPress sites.
Modern Features: Includes features like loop mode, fade effects, coverflow, and 3D transitions.

Setting Up Swiper in WordPress

1. Download Swiper Files

You can get the latest version of Swiper from the JSDelivr CDN.

2. Enqueue Swiper Assets

Add the following code to your theme's functions.php to load Swiper CSS and JS:

wp_enqueue_script(swiper-slider . '-js', get_template_directory_uri() . '/plugins/swiper-slider/swiper-bundle.min.js', [], '11.2.6', false);
wp_enqueue_style(swiper-slider, get_template_directory_uri() . '/plugins/swiper-slider/swiper-bundle.min.css', [], '11.2.6', 'screen');

3. Add Swiper HTML Markup

Insert the following HTML structure where you want your slider to appear (e.g., in a block template, widget, or page):

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>

  <!-- If you want navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If you want pagination -->
  <div class="swiper-pagination"></div>
</div>

4. Initialize Swiper with JavaScript

You can initialize Swiper in a separate JavaScript file or within a <script> tag:

const swiper = new Swiper('.swiper', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
});

Make sure this script runs after Swiper's JS file has loaded. You can hook it into WordPress using wp_add_inline_script() if needed.

Customizing Swiper Slider

Change Slide Speed: Use speed: 500 to control transition duration in milliseconds.
Effect Options: Swiper supports effects like fadecubecoverflowand flip
Responsive Breakpoints: Customize behavior based on screen size using the breakpoints option.

Using Swiper in WordPress Blocks or Templates

You can include Swiper inside custom templates or ACF blocks by inserting the markup and ensuring the assets are enqueued properly. For reusable sliders, consider registering a shortcode or block.

Example Shortcode Implementation:

function my_swiper_shortcode() {
  ob_start();
  ?>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
  </div>
  <script>
    const swiper = new Swiper('.swiper', {
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
  <?php
  return ob_get_clean();
}
add_shortcode('my_swiper', 'my_swiper_shortcode');

Use the shortcode [my_swiper] inside any post, page, or widget.

Conclusion

Integrating Swiper Slider into your WordPress website enhances user experience with smooth, mobile-friendly transitions. By enqueueing the correct assets, writing clean markup, and customizing the JavaScript, you can easily build sliders for galleries, testimonials, products, and more. Swiper is a powerful addition to any WordPress theme—give it a try and bring your content to life!

April 29th 2025