[Anythingslider] Center slideimage

[Pino]

Hey,

Currenly working with Anythingslider for WordPress and loving it so far. Running into a problem thought;

I want a full with slider. Created a parent DIV (height:400px; width:100%) and enabled the option Expand so it will fit the intire width of the page. Also set Resize to true becaus I ran into a problem when resizing the browser from small to big the slider woudn’t increase aswell. So I was left with a big gap.

The problem is that the image I use in the slide isn’t center aligned. Looks like it sticks to the left and I have no idea how to change it. Even tried to center (margin:0 auto;) the A within the .Content div in the slider but no luck.

Any ideas? Pulling my hair uit for the past 3 days..

[Mottie]

Do you want the image to expand inside the slider? or just center it?

To make the image fill the slider, set the “resizeContents” option to true.

To center the image, try using text-align:center; instead of the margin.

[XaviJr]

Check if the div you tried to center have display: block

[Pino]

Thanks for the advise guys, but so far no luck!

The Parent div that holds the slider has display:block and replaced the margin:0auto on the A.Content div with text-align:center; but didn’t changed the outcome. The image in the slider keeps sticking to the left and when resizing the browser the image won’t stay centered. Any other advice?

EDIT

Let me clarify just to make sure. The idea is to have the slider on the front page and it has to be full with. Im using an image (1900px wide) so that when people with a bigger screen resolution can see the intire slide. People that have a smaller screen dont see the intire slide. The image in the slide itself doesn’t have to resize. It just needs to allign centered, thats it! :)

[Pino]

*BUMP*

Anyone? I’m really stuck..

Thank you very much for your time.

[Mottie]

Hi Pino!

MovingBoxes doesn’t really work that way. You may end up needing a custom script to do what you are describing because I can’t think of any sliders that will do that.

[Pino]

Thx for the Replay Mottie! But this isn’t about MovingBoxes but about AnythingSlider.. Is it possible with that slider?

[Mottie]

Derp!

I’m sorry, I’ve been trying to catch up with all of my emails and I guess I totally spaced on this one LOL. Anyway, yes it is possible… just add the image as a centered background. Here is a demo (resize the result window to see it work), and the code:

HTML

CSS

#wrapper {

width: 100%;

height: 300px;

}

#slider .panel1 { background: url(http://placekitten.com/800/300) no-repeat center center; }

#slider .panel2 { background: url(http://placehold.it/800x300) no-repeat center center; }

#slider .panel3 { background: url(http://placedog.com/800/300) no-repeat center center; }

#slider .panel4 { background: url(http://dummyimage.com/800x300/000/fff.jpg) no-repeat center center; }

Script

$(function(){

$('#slider').anythingSlider({

// If true, the entire slider will expand to fit the parent element

expand: true

});

});​

[Pino]

Hello Motte,

First off, thank you for your response! Sorry for the late reaction, i’ve been away for a couple of weeks.

Is this possible with the WordPress Anythingslider plugin? I get how it works when hardcoding this in html/css but I don’t know how to do this with the plugin itself.

This image is not rendered trough the css but with the plugin so I can’t use the “background center center” workaround in CSS.

Any thoughts? Thank you!

[Mottie]

You might have to ask Jacob about this over in the WordPress forums… but, I don’t see why you couldn’t add an empty slide, then just add the css somewhere on your page. Although you might have to target the panel with css using nth-child or something.

[tgstig]

Hello Pino,

I have also the same problem, how did you fix yours?

I also want to center the image inside the slider, because when the size of the screen becomes smaller the images is being positioned on left and the half of the image is not seen.

If you have a 1900px image but the screen is 1200px, 700px from the right side will not be seen.

I hope there’s a solution for this.

[aximili]

Here is a solution

http://stackoverflow.com/questions/17480370/anythingslider-centre-images-even-on-low-screen-resolution/17480484

[Author]

Posts