Hi Annabelle Dockins,
You can try this Script using the Code widget. It might not be enabled if you don't see it and you need to reach out to the administrator. Also, there is a default gallery widget to save you from the hassle of coding. Still if you face any issue - ping me at akapoor@brandworks.site or I also provide on demand support if you need it
---------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autoplay Image Gallery with Slide Animation</title>
<style>
/* Basic styling for the gallery */
.gallery-container {
width: 100%;
max-width: 600px;
position: relative;
margin: auto;
overflow: hidden;
}
.gallery-wrapper {
display: flex;
transition: transform 0.6s ease-in-out;
width: 100%;
}
.gallery-image {
min-width: 100%;
transition: opacity 0.6s ease-in-out;
}
/* Arrow button styles */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #333;
background: rgba(255, 255, 255, 0.7);
border: none;
cursor: pointer;
padding: 10px;
}
.arrow.left {
left: 0;
}
.arrow.right {
right: 0;
}
</style>
</head>
<body>
<div class="gallery-container">
<!-- Wrapper for slide effect -->
<div class="gallery-wrapper" id="galleryWrapper">
<!-- Gallery Images -->
<img src="https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg" alt="Image 1" class="gallery-image">
<img src="https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg" alt="Image 2" class="gallery-image">
<img src="https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg" alt="Image 3" class="gallery-image">
<img src="https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg" alt="Image 4" class="gallery-image">
</div>
<!-- Arrow buttons -->
<button class="arrow left" onclick="changeSlide(-1)">❮</button>
<button class="arrow right" onclick="changeSlide(1)">❯</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll(".gallery-image");
const totalSlides = slides.length;
const galleryWrapper = document.getElementById("galleryWrapper");
function showSlide(index) {
// Calculate the new transform value for sliding effect
galleryWrapper.style.transform = `translateX(-${index * 100}%)`;
}
function changeSlide(direction) {
currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
showSlide(currentSlide);
}
function autoPlay() {
changeSlide(1); // Move to the next slide
}
// Set interval for autoplay (every 3 seconds)
setInterval(autoPlay, 3000);
</script>
</body>
</html>
--------------------------------------------------------
------------------------------
Abhisek Kapoor
Cvent Manager
The Martech WeeklyUnited Kingdom
------------------------------
Original Message:
Sent: 11-08-2024 11:27
From: Annabelle Dockins
Subject: Gallery Slide Show on Attendee Hub Event App
Is there a way to have a gallery slide show automatically playing on the app? It is available on the registration website.
#AttendeeHub
#EventApp
------------------------------
Annabelle Dockins
Events & Recruiting Coordinator
Weed ManCanada
------------------------------