CODEWITHSUNDEEP
htmlcssslideshow
ShriSun
ShriSun

Reputation: 129

Image Slider in css/Html

I have created a website which has Image Slider. But my all Images are of different size, so when the image changes, the page also scrolls... Please help me out to fix it out. I am providing a link for the demo. Click here for Demo For better once visit by decreasing size of browser.

Upvotes: 0

Views: 435

Answers (4)

Chirag Jain
Chirag Jain

Reputation: 1387

Edit all images with the same height, will solve your problem. You can edit images in many Softwares, best is paint

Upvotes: 1

Farzin Kanzi
Farzin Kanzi

Reputation: 3433

You can not have different height element and except what you want. At least in one step you must fix the height of the slider you can do this:

.w3-content {
  height: 700px;
  overflow: hidden;
}

Or 

.mySlides {
   height: 700px;
   overflow: hidden;
}

Remember that 1000px does not help you because some of the images hase height smaller than 1000px. You need to select the smallest height as the fixed height;

Upvotes: 0

Dasar
Dasar

Reputation: 360

You can add 

.mySlides {
    height: 1000px;
    overflow: hidden;
}

to your stylesheet but note that this will crop your images if they are taller than 1000px and will leave whitespace below if they're shorter. You can use any value instead of 1000px.

Nonetheless, this is a bad workaround. The best way to do it would be to resize all of your images to the same height.

Upvotes: 0

fernando
fernando

Reputation: 820

to fix your issue you, need to use consistent size of an image - that will fix height problem. Just create 5 images 1000px by 500px and use them for all slides. If you want to have different size of every image, you will need to have "white border" or different height.

Upvotes: 0

Related Questions