Slideshow fix

So ive been wanting to change the height of my slideshow and i tried changing things and i ended up just changing the heights of the pictures in my slideshow but then i realized there is a huge space right below my pictures and i don’t know how to remove it any help? here is my code

<style>

div.a{
    margin:0 auto;
    width: 50%;
    max-width: 500px;
    min-width: 500px;
    height:50%
     max-height: 500px;
    min-height: 500px;
}
/*slideshow starts here*/
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  max-height: 50px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}



.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
/*slideshow ends here*/
</style>
    
   <!--slideshow begins here-->
<div class="a">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://lh3.googleusercontent.com/Fh-fRNBtR-6ELSmbWWHml92haqH43Alr_awwmTxWAJco9yhzlZ-URLxRfHWTb1UyMUOOrs0939dropWWt_t0HY7sCRne1-GIqQW2bIVlkYxl-z4_GXvhCEm0AzIkYh0UstDaGWVX8jngcYa013zbN-btFKwjYY1zrd_oKr3a5NN1CU3JoxszE_kCNcQ9CwpBr4dayEhfeqXN5WPly5hCT2DdPyUrXeUvYkqff1nAzKNjJz5gTfWwYSVYqOB-An3FlAI6dfA04-81K4c8zrGBU-nWrC-np80jYYxqi0dbLMdT41ISybEbKdSu2oCk3rQqpe2fZjwhjXn4sSBNc1p3x0jZNUhY2i8QSGa9yY3PpN_2AcwtMKFOBJYQmpGAcb1vo9P_ZBrYfwB-GjV-FDc8MH8Cc6cclTM6TYQzLwZTdgUJkOAgZghHcyRYLxcVRj6JPMSwSi54P2m_4oZcbLFzJh9PS_yKpw-vhdVR13VtjAvMJXkIeh6YqbEgMy0FQdj-Do-65te5Y9nlEq25GWRJxSOMzN0vP2WXKBZeDFF97yMlPeM0xUNcatIh-lKoXiFG-bfyyQLC84uiUrO8F3m_7bfT_WpgVPbNLGkJvJYd6-9hr0sBPOChko02jnk5ZQw=w1304-h869-no" style="width:100%" "height:50px;"/>
  <div class="text"> </div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://lh3.googleusercontent.com/WhnLhiDaJAFrwHHHlkTo0Ta9qpn3LbGe_LfmcVCF3Yp7aTSzgowiV7-a_4CiVkK3KL0sDmKQj5p5bkbbGlElyV5gnEIhoEkIRwk1dCIxcys1HONjG5TjYSJZWbdIGQQcig4ebMx2In2bT2IvK6CVCiDMryLRHN6aAN8D4pMoMsl-XsWEDjtdzyFTjzdlauHif8TCmEfmCR1FyoHGLyvn32q_c5X9STrm6bD5GZkIANEHZo_JugcL0xSCEuhlhPo9CAQ4Oi_XdXLDks98BIqItJi5dggO_ndHk3iJyYk5x5KbOvBebTWfr6ibRNOGT3_YY8sXiOfD6DuLhIkHahsiqZ6rOejLgYGc3Fga3VCumFdmOZ58aadpEtnk3hrd-5Vm-wq5GzNCINQMFyYKW3R88IrlTTsvMMXohNhiRuXeOnLDr-vv23ZTrCfzoUswUDNU1kgTQCIeYybCNpP3xFaj8yNJ7UjP2znYyO6J2ZBz0d_edE1mlsfWdEyIolBwbAfwH6ghLpoSwl-125zmOJZCX23lqRYWbx-wS9nSwMlxWR9sDGeeCCPnrfBSxYjSlYdAu7H3v-izJSA3B16nSeADr86upXEx5XXy5IFvOqT57U_typjl1Jp3bUCSiHJ3HCE=w359-h203-no" style="width:100%" /> <!--Image must be 1000x350 to get that good format-->
  <div class="text"></div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://lh3.googleusercontent.com/Az24ZMhdleRwNk9CnWA4Rm1fa5QA_7yx-1LdlXtT3PZMrF3FHN5oCQd8yP-hsfuhWsntZL20nqZocASskLF5y83ySA7DdhpZW5OlPIbIdZwJeiCWrJuaDoU4eJFPvWWU1tL0uP8PK4r8VZQE3ZShTdmFVM00DlpCFe16Wb5PMpAeF5pY1ZvF44SmXpYBw3ijUqKi4JoVNRGAAHptXd9qqsPu4nrZQksy_tTlLSdzfrPloJSm1pIAThnyqs8_b9NUbrr1t7-8qfAWVL2PXQy9EzEhEIRj9jrpjrIzG6j8c1ZGKCkeVzi_NpWgylvLIrXEsJBtghkebN1Zdgu97zOGluBOi9nho4db2cXMxWlBc5WlvHJB7QASJYL33juKVc15uTgY9_6DmrKPmh7g-OXQ7VfsTvp9HjYVQ7mn6Zkbrq7IA-S8iL_H-7kJ9M036cppj01AAwhvAGO5L7pPFXdIC1DcR7ZZRta3BV5yQ9c9VAEhPduahr4vDhfi757mRY0UCSIMKc1kGcHYnotfhWIT0vvdKlC_b7Zq1KYTpL0b9-MKQifUlGICiIF-ZVzgFBbMlJ3ve_paH6X1pbM_qox45y0MH7SUm-9bRH1fyhIL2a7KBSO5FFx8pxImmfefFmQ=w1304-h869-no" style="width:100%" />
  <div class="text"></div>
</div>

</div>

<br />

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>
<!--slideshow ends here-->
        
<script>
//slideshow begins here
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 3000); // Change image every 3 seconds
}
//slideshow ends here
</script>

It’s hard to tell what you want this to look like but you have made a number of logic errors in your code. :slight_smile:

Firstly your images are not the same heights so if you have a slideshow that adjusts to each image’s different height then you will have a page with the content underneath jumping up and down every time an image changes. This is not very nice for the user and indeed should be avoided especially for those who suffer visual disturbances etc.

Usually a slideshow will have a fixed (or responsive ) height that makes sure all images fill the same height so that the slideshow is smooth. This can be done by choosing images of the same size, same aspect ratio or scaling the height to the appropriate dimension while leaving width to auto.

You have set a height on the div.a of 500px which means that the container that holds the images will be 500px no matter the size of the image. If you want to reduce the height then reduce the height of this element and then size your images to match.

Note that in several places you have used width; max-width and min-width like this:

   width: 50%;
    max-width: 500px;
    min-width: 500px;

Effectively the element can be nothing but 500px wide because its min and max is 500px. The width:50% is ignored completely. Those three rules could simply be replaced with width:500px because that is what you are getting. You make the same mistake a few times and also with the height dimensions.

Note you have missed the closing semi-colon after height:50% in the above code but I guess that was just a copy and paste type.

To be honest there are so many good responsive image sliders around these days that unless you are an experienced coder I would go for a ready made solution. Most these days are responsive and work on mobile etc.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.