Swiper Slider Autoplay Loop

March 28, 2025 · AI Conversations

User

Swipper slider display 4 image alnd loop auto play wordpress

Assistant

To create a **Swiper slider** in **WordPress** that displays **4 images at a time**, with **looping** and **autoplay**, you can follow these steps:

—

### ✅ 1. **Include Swiper in Your Theme**
If you're not using a plugin, enqueue Swiper manually in your theme’s `functions.php`:

function add_swiper_slider_assets() {
    // Swiper CSS
    wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
    
    // Swiper JS
    wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'add_swiper_slider_assets');

—

### ✅ 2. **Add HTML for the Slider (in Page, Post, or Template)**

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="IMAGE_URL_1" alt=""></div>
    <div class="swiper-slide"><img src="IMAGE_URL_2" alt=""></div>
    <div class="swiper-slide"><img src="IMAGE_URL_3" alt=""></div>
    <div class="swiper-slide"><img src="IMAGE_URL_4" alt=""></div>
    <div class="swiper-slide"><img src="IMAGE_URL_5" alt=""></div>
    <div class="swiper-slide"><img src="IMAGE_URL_6" alt=""></div>
  </div>
</div>

> Replace `IMAGE_URL_X` with your actual image URLs (use WordPress media URLs or dynamic PHP if needed).

—

### ✅ 3. **Add Swiper Initialization Script**

Place this in your theme footer, or enqueue via a custom JS file:

<script>
document.addEventListener('DOMContentLoaded', function () {
    new Swiper('.mySwiper', {
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        breakpoints: {
            768: { slidesPerView: 2 },
            1024: { slidesPerView: 3 },
            1280: { slidesPerView: 4 }
        }
    });
});
</script>

—

### ✅ 4. **Add Some CSS (Optional for Spacing)**

.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

—

### ✅ 5. **Optional: Use ACF or WP_Query for Dynamic Images**
If you want to pull the images from custom fields or a post loop, I can help you with that too.

—

Would you like help making this dynamic using **ACF**, **WP_Query**, or **Elementor**?

User

make this smooth loading

Assistant

To make the **Swiper slider load smoothly** in WordPress, you can combine **CSS transitions**, **lazy loading**, and **a fade-in effect** to enhance the user experience. Here's a step-by-step enhancement:

—

### ✅ 1. **Add Smooth Fade-In Effect to Slides**

Add this CSS to your theme or via customizer:

/* Initial state for fade-in */
.swiper-slide {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* After Swiper initializes */
.swiper-slide.swiper-slide-active,
.swiper-slide.swiper-slide-duplicate-active,
.swiper-slide-visible {
  opacity: 1;
  transform: translateY(0);
}

—

### ✅ 2. **Enable Lazy Loading for Images**

Update your HTML like this:

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img data-src="IMAGE_URL_1" class="swiper-lazy" alt="">
      <div class="swiper-lazy-preloader"></div>
    </div>
    <!-- Repeat for other images -->
  </div>
</div>

—

### ✅ 3. **Update JS Initialization to Include Lazy Loading**

<script>
document.addEventListener('DOMContentLoaded', function () {
  new Swiper('.mySwiper', {
    slidesPerView: 4,
    spaceBetween: 20,
    loop: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    lazy: {
      loadOnTransitionStart: true,
      loadPrevNext: true,
    },
    breakpoints: {
      768: { slidesPerView: 2 },
      1024: { slidesPerView: 3 },
      1280: { slidesPerView: 4 }
    },
    on: {
      slideChangeTransitionStart: function () {
        const slides = document.querySelectorAll('.swiper-slide');
        slides.forEach(slide => {
          slide.classList.remove('fade-in');
        });
      },
      slideChangeTransitionEnd: function () {
        const activeSlides = document.querySelectorAll('.swiper-slide-visible');
        activeSlides.forEach(slide => {
          slide.classList.add('fade-in');
        });
      }
    }
  });
});
</script>

Then add the fade-in effect:

.swiper-slide.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

—

### ✅ 4. **Make Sure Swiper Lazy CSS Is Included**

Swiper’s CDN already supports `.swiper-lazy` and `.swiper-lazy-preloader`, so you’re covered if you're loading:

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

—

### ✅ Result:
This setup will:

– **Lazy-load images** for performance.
– **Fade-in slides** smoothly.
– **Load autoplay + loop** with elegance.

—

Would you like me to turn this into a **shortcode** or a **custom Elementor widget** for easier reuse inside WordPress?

Swiper Slider Autoplay Loop

Leave a Comment Cancel