plugins – owl carousel + ACF Photo Gallery Field
Question
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">
<?php
//Get the images ids from the post_metadata
$images = acf_photo_gallery('slide', $post->ID);
$i=0;
//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>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php echo $full_image_url; ?>" class="d-block w-100" alt="..."/>
</div>
</div>
<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>
<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>
</button>
</div>
<?php endforeach; endif; ?>
</div>
Thank you very much for your help
0
2 months
2022-12-12T16:54:37-05:00
2022-12-12T16:54:37-05:00 0 Answers
0 views
0
Leave an answer