Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Anythingslider] Center slideimage

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #36591
    Pino
    Member

    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..

    #96515
    Mottie
    Member

    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.

    #96517
    XaviJr
    Participant

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

    #96587
    Pino
    Member

    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! :)

    #96637
    Pino
    Member

    *BUMP*

    Anyone? I’m really stuck..

    Thank you very much for your time.

    #96707
    Mottie
    Member

    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.

    #96922
    Pino
    Member

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

    #96924
    Mottie
    Member

    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
    });
    });‚Äč
    #98174
    Pino
    Member

    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!

    #98230
    Mottie
    Member

    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.

    #105745
    tgstig
    Member

    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.

    #141615
    aximili
    Participant
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.