Home › Forums › Backend Issues (wp-admin) › Advanced Custom Field Gallery
So, I use elementor and I’m having difficulty with the gallery. I’m trying to create an image slider, and the pictures won’t show the regular way. So I’ve decided to create my own slider with custom html CSS and javascript, and try to combine it with the PHP code on this website to display the photos with a slider. Everything works fine except of the actual PHP part where it needs to grab the images from the gallery. Anyone have any suggestions? (what’s important is the PHP part, the rest works fine. I’m attaching everyhing just so you guys can see the whole picture) Attaching my code here:
$images = get_field('myGallery');
echo '<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<style>
.carousel {
margin: 0;
box-sizing: border-box;
height: 400px;
position: relative;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide .pic {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.slide[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
.slide-left, .slide-right{
}
.slide-right, .slide-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 35px;
height: 45px;
width: 45px;
cursor: pointer;
z-index: 2;
}
.carousel .slide-right {
right: 3%;
}
.carousel .slide-left {
left: 3%;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<section aria-label="Newest Photos">
<div class="carousel" data-carousel>
<ul data-slides>';
<?php foreach( $images as $image ): ?>
echo '<li>
<img />" alt="Thumbnail of <?php echo esc_url($image['alt']); ?>" />
</li>';
<?php endforeach; ?>
echo '</ul>
<img src="http://nadlan1.org/wp-content/themes/kadence/assets/images/back.png" />
<img src="http://nadlan1.org/wp-content/themes/kadence/assets/images/next.png" />
</div>
</section>
<script>
const arrows = document.querySelectorAll("[data-carousel-arrow]")
arrows.forEach(arrow => {
arrow.addEventListener("click", () => {
const offset = arrow.dataset.carouselArrow === "next" ? 1 : -1
const slides = arrow
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0
slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
});
})
</script>
</body>
</html>';
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
Are you building WordPress sites with ACF and @BeaverBuilder, and wanted to use your ACF Blocks in both the block editor and Beaver Builder?
— Advanced Custom Fields (@wp_acf) May 10, 2023
The BB team recently added support for using ACF Blocks in Beaver Builder. Check it out 👇https://t.co/UalEIa5aQi
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.