Title: Modifying Slideshows
Last modified: June 7, 2024

---

# Modifying Slideshows

 *  Resolved [kraegan](https://wordpress.org/support/users/kraegan/)
 * (@kraegan)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/modifying-slideshows/)
 * 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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmodifying-slideshows%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [rodicaelena](https://wordpress.org/support/users/rodicaelena/)
 * (@rodicaelena)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/modifying-slideshows/#post-17822488)
 * Hi,
 * This would require custom work, which we can’t offer on the forum.
 * Hope you understand.
 * Kind regards,
 * Rodica
 *  Thread Starter [kraegan](https://wordpress.org/support/users/kraegan/)
 * (@kraegan)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/modifying-slideshows/#post-17822806)
 * I resolved this myself using ChatGPT
 *     ```wp-block-code
       <!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)

The topic ‘Modifying Slideshows’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/jaxon/1.0.11/screenshot.png)
 * Jaxon
 * [Support Threads](https://wordpress.org/support/theme/jaxon/)
 * [Active Topics](https://wordpress.org/support/theme/jaxon/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/jaxon/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/jaxon/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [kraegan](https://wordpress.org/support/users/kraegan/)
 * Last activity: [1 year, 10 months ago](https://wordpress.org/support/topic/modifying-slideshows/#post-17822806)
 * Status: resolved