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>';
