- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › AnythingSlider: center image slide horizontally and/or vertically
Hi,
I’m using AnythingSlider to implement a photo slideshow. I have to display both vertically and horizontally oriented pictures and I don’t want them to deform to accomodate a fixed slider size, so I’m using the option “resizeContents: false” and it’s working fine. The problem is that now I’d like to center the images. How can I do this?
Hi ilSignorCarlo!
Are all of the slider panels the same size? The slider was designed to resize to fit the content, so you shouldn’t have to center the image in the slider. If not, then try using “text-align:center” and “vertical-align:middle” to center the image.
Well, since I’m using that option the slider panels have the size of the picture they contain.
Imagine I have an external div with height: 600px. I resize my vertical pictures to have height: 600px, so they fit perfectly. I cannot do the same with horizontal pictures, so they will have a height less than 600px. I would like these pictures to appear vertically centered in the div or at least aligned with the bottom margin to the bottom of the container div.
So I grabbed the css from this post and incorporated it into this demo. The only problem I noticed was that I had to set the slider height otherwise the first slide wasn’t set correctly…
#slider, #slider li {
height: 200px;
list-style: none;
}
It looks like that’s a bug that I’ll need to fix.
wow, thanks. that’s perfect.
in the bit of code you posted here, how did you choose the height: 200px? it’s just a small number?
The first image has a height of 200px… if I leave it blank, the slider height starts out as the tallest slide. Like I said, I need to fix that.
ok, thanks again : )