Open Forum

 View Only
  • 1.  Gallery Slide Show on Attendee Hub Event App

    Posted 24 days ago

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


  • 2.  RE: Gallery Slide Show on Attendee Hub Event App

    Posted 19 days ago

    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)">&#10094;</button>
      <button class="arrow right" onclick="changeSlide(1)">&#10095;</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
    ------------------------------