plugins – owl carousel + ACF Photo Gallery Field


I thank you in advance for your time.
I have a problem on how to create the loop by combining owl carousel and ACF Photo Gallery Field plugin. I put the images in the backend and through the code I see them one below the other. The slide doesn’t work…

<div class="col">
            //Get the images ids from the post_metadata
            $images = acf_photo_gallery('slide', $post->ID);
            //Check if return array has anything in it
            if( count($images) ):
                //Cool, we got some data so now let's loop over it
                foreach($images as $image):
                    $id = $image['id']; // The attachment id of the media
                    $title = $image['title']; //The title
                    $caption= $image['caption']; //The caption
                    $full_image_url= $image['full_image_url']; //Full size image url
                    $full_image_url = acf_photo_gallery_resize_image($full_image_url, 262, 160); //Resized size to 262px width by 160px height image url
                    $thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
                    $url= $image['url']; //Goto any link when clicked
                    $target= $image['target']; //Open normal or new tab
                    $alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
                    $class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="<?php echo $full_image_url; ?>" class="d-block w-100" alt="..."/>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        <?php endforeach; endif; ?>

Thank you very much for your help

bastiag5 2 months 2022-12-12T16:54:37-05:00 0 Answers 0 views 0

Leave an answer