Question

I’m trying to create a very simple jquery slider, instead of using one of the millions probably out there. So I have almost finished it, but I have a problem. I’m using jquery’s animate to move the images, and I need to show all images on the same horizontal line to get the script working. Now, they’re listed vertically, and I’ve been thinking this for 2 hours now. So here’s the HTML:

<div id="gallery-wrap">
<div id="gallery">
    <img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
</div>
<div id="gallery-controls">
<a id="gallery-prev" href="#"><img alt="" /> </a>
<a id="gallery-next" href="#"><img alt="" /></a></div>
</div>
<div style="clear: both;"></div>

The CSS:

    #gallery-wrap{margin: 0 auto; overflow: visible; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
#gallery{position: relative; left: 0; top: 0; width:100%;}
.galleryimage{float:left; width:100%; height:300px;}

#gallery-controls{width: 100%; z-index:4;}
#gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; background-color:rgba(77,77,77,0.5);}
#gallery-next{position:absolute; right:0px; top:0px;  width:50%; height:300px; background-color:rgba(88,88,88,0.5);}

And the jquery:

 $(document).ready(function(){ 

    $("#gallery-prev").click(function(){
  $(".galleryimage").animate({"left": "-=100%"}, "slow");
});

$("#gallery-next").click(function(){
  $(".galleryimage").animate({"left": "+=100%"}, "slow");
});

});

Here’s a picture to show how the images are rendered at the moment just in case I explained something wrong, English isn’t my first language:

I’ve tried display:inline without luck.

Answer 1

You are using #gallery li img {display:inline;}

Instead apply display:inline; to this #gallery li and remove it from #gallery li img

#gallery li{width: /*here goes some width*/; height: 300px; float:left; display: inline;}

And don’t use width of your image and li element as 100%, check this out My fiddle

I saw the source of your page, assuming that you need all the images in a single horizontal row, set a width to your <li> element, and use <div style="clear: both;"></div> before the text paragraphs to clear out the floats.