Sunday, January 08, 2023
The Great Tit
Updated: 8. 1. 2023, Added: 8. 1. 2023

Swiper.js ACF Gallery slider

You can create a simple Image slider with Swiper.js and ACF Gallery field. Here is the quick tutorial for that.

This can be your image slider
  1. Create ACF Gallery field and set the ACF field to Return the Image ID
  2. Add Images
  3. Embed the Swiper.js
  4. Add a code for Swiper initialization

Create ACF Gallery field and add images

Go to ACF, create a field group and add field type Gallery.

Set the ACF field to Return the Image ID

Add images to the field:

Prepare the Slider

You need to embed the swiper js and css. You can use the CDN or download and add to your FTP.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

I am using Advanced Scripts for that and load it from my theme folder:

Create the slider code and add it to the page or template (if you use Oxygen builder, use unwrapped code block).

<div class="swiper-container self--center">
    <div class="photo-slider swiper self--center">
        <div class=" swiper-wrapper">
            <?php
            $images = get_field('fotogalerie'); // ACF field slug
            $size = 'full'; // (thumbnail, medium, large, full or custom size)
            if ($images) : ?>
                <?php foreach ($images as $image_id) : ?>
                    <div class="swiper-slide slider-image">
                        <?php echo wp_get_attachment_image($image_id, $size); ?>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</div>
usage in Oxygen builder Code Block

Add .JS code for slider initialization (customize it how you need with Swiper API):

const swiper = new Swiper('.photo-slider.swiper', {
    disableOnInteraction: false,
    slidesPerView: 1,
    centeredSlides: true,
    loop: true,
    // Responsive breakpoints
    breakpoints: {
        480: {
            slidesPerView: 2,
            spaceBetween: 15,
        },
        768: {
            slidesPerView: 2,
            spaceBetween: 25,
        },
        1366: {
            slidesPerView: 3,
            spaceBetween: 40,
        },
        1920: {
            slidesPerView: 4,
            spaceBetween: 45,
        }
    },
    autoplay: {
        delay: 1,
    },
    speed: 5000,

    grabCursor: true,
    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});
usage in Oxygen builder Code Block

Thats it, you are done.

Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram