Modifying Slideshows

  • Resolved kraegan

    (@kraegan)


    5 months, 2 weeks ago

    I’m attempting to use slide shows as an image swap for products. End goal is to load it in the place of the category images. I need to know how to change the size of the slide show and hide the control buttons. Or, is there a better tool/block without adding more WP plugins.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    This would require custom work, which we can’t offer on the forum.

    Hope you understand.

    Kind regards,

    Rodica

    Thread Starter kraegan

    (@kraegan)

    I resolved this myself using ChatGPT

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
    <style>
      .slideshow-container {
        position: relative;
        max-width: 100%;
      }

      .mySlides {
        display: none;
      }

      .fade {
        animation-name: fade;
        animation-duration: 3s;
      }

      @keyframes fade {
        from { opacity: .4 } 
        to { opacity: 1 }
      }
    </style>
    <script>
      document.addEventListener('DOMContentLoaded', (event) => {
        let slideIndex = 0;
        showSlides();

        function showSlides() {
          let i;
          let slides = document.getElementsByClassName("mySlides");
          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
          }
          slideIndex++;
          if (slideIndex > slides.length) {slideIndex = 1}    
          slides[slideIndex-1].style.display = "block";  
          setTimeout(showSlides, 5000); // Change image every 5 seconds
        }
      });
    </script>
    </head>
    <body <?php body_class(); ?>>
    <!-- Slideshow container -->
    <div class="slideshow-container">
      <div class="mySlides fade">
        <img src="image1.jpg" style="width:100%">
      </div>
      <div class="mySlides fade">
        <img src="image2.jpg" style="width:100%">
      </div>
      <div class="mySlides fade">
        <img src="image3.jpg" style="width:100%">
      </div>
    </div>
    <!-- Rest of your header content -->

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.