Slideshow won't accept fixed height


Tags: javascript,html,css,image,slideshow

Problem :

My current slideshow css with script doesn't seem to accept a common height for the images. Because of this... when they transition the smaller pictures look like they are actually displaying partially above the previous one (aka you see the older image below it). Is there a reason why the height value I have set doesn't do anything and how do I fix this?

CSS

/* For Slideshow */
/* the slide container with a fixed size */
.slides {
box-shadow: 0px 0px 6px black;
margin-left: 0; 
margin-right: 0;
width: 500px;
height: 200px;
postion: relative;
}

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img { 
display: block;
position: absolute; 
transition: opacity 1s;
opacity: 0;
width: 100%;
}

/* the first image is the current slide. it's faded in. */
.slides img:first-child { 
z-index: 2; /* frontmost */
opacity: 1;
}

/* the last image is the previous slide. it's behind 
the current slide and it's faded over. */
.slides img:last-child {
z-index: 1; /* behind current slide */
opacity: 1;
}
.container {

margin-left: auto;  
margin-right: auto;
background-color: #B2D1E0;
width: 1000px;
height: 200px;
border-top: 3px solid black;
position: relative;
margin-bottom: 100px;
}

HTML

<script>

function nextSlide() {
        var q = function(sel) { return document.querySelector(sel); 

}   
        q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 3000)

</script>

<div class = "container">

<div class="slides">
<img src="http://media02.hongkiat.com/programming-myth/programmer.jpg">
<img src="How-to-Hire-a-Software-Developer1.jpg">
<img src="info-tech-business.jpg">
<img src="IT-Outsourcing.jpg">
<img src="http://lorempixel.com/500/300/?r=5">
</div>
</div>

enter image description here



Solution :

Add height in slides img as well. Hope this will work

 .slides img { 
    display: block;
    position: absolute; 
    transition: opacity 1s;
    opacity: 0;
    width: 100%;
    height:200px;
    margin-top:0px;
    }

    CSS Howto..

    How to apply icons to links using css?

    How to manually apply styles from particular style sheet to an element?

    How to make the content div scrollable without using javascript

    How to render text in .NET in the same size as browsers does given CSS for the text

    How to prepend a div to another div using javascript

    How to make the height REALLY 100%

    How to Make CSS Work on 404 Error Page?

    How to change CSS id property depending upon screen size

    How to make Flexbox span multiple lines?

    CSS: Changing div's property on another div's a:hover. Possible ? How?

    How to flow text from a box to another with CSS

    How to make the visible part of png image with transparent background as a link?

    how to choose correct css class to change element

    How to set the maximum height of CSS tables?

    How can I set the System.Web.Optimization bundler to correctly transform ISO unicode

    how to insert css into html for blogger gadget

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    jQuery slideshow image delay

    div height is not showing properly

    CSS: How to select all rel atributes

    How can you align all the cells to the left with css [closed]

    How to use the float:left property in CSS without having the trouble I have?

    How can I specify a *.css file in an ASP.NET UserControl?

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    How to override line-height and height css properties that are adding from external css using inline css?

    How to have two items be placed next to each other in HTML?

    Responsive menu show and hide on click

    How do I prevent text from flowing onto different sections of a page?

    How to get H1 content the same height in Firefox and in IE8?

    How to change active link color in navigation bar