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

Home Forums JavaScript Anything Slider funny offset

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #30221

    Not sure what’s causing this, as I got the AnythingSlider to work fine on my own site, but on this WordPress page, the slides (other than the first one) are offset but several pixels.

    Any chance someone could go have a look and see if they can work out why?

    Obviously the borders are just so I can visualise what’s going on. :-)


    Hi yoyolise,

    if your problem is that the left arrow overlaps with the content during sliding, then check this at line 16 in your slider.css:

    .anythingSlider .back {
    background-position:-67px 0;

    Changing the left value to something like -30px sets the arrow a little bit more to the left so it doesn’t overlap with the sliding content anymore.

    Best regards


    Thanks. That wasn’t actually the problem though.

    My problem is that the first slide is aligned perfectly, but then the content in the second is offset by about 5 pixels with the edges hidden in the overflow. The third is offset by about 10 pixels, the fourth by 15, etc… By the fourth slide, a sliver of content in the previous div can actually be seen on the page as well.

    I can’t work out how this could possibly occur.


    I’m having a similar issue.
    All images are offset 40px to the right. So on slide 2 you see 40px of the right edge of slide 1 and the right 40px of slide 2 is cut off.
    I’m fairly certain it’s some Css on the page, but after much trial and error I still can’t find where the offset is introduced. Any ideas?


    Sorry to dig up an old thread, but I am experiencing this exact same issue and I didn’t see a solution discussed. Little help?


    The slideshow linked in the original post seems to be fixed. Can you make a jsfiddle and post the link?


    Hi TribalDancer,

    I’m guessing but I bet it’s a padding and/or margin issue. The slides inside of AnythingSlider need to be wrapped in an element with margin: 0; and padding: 0; like this:

    The “.inside” css should include this:

    .inside { padding: 0; margin: 0; }

    If that doesn’t work, then try setting the “resizeContents” option to false and set the panel sizes in the css:

    #slider, #slider li { width: 500px; height: 300px; }

    Hi Mottie, hi everybody,

    but what to do, if I want some padding or margin to separate one picture from another in case I use to show 3 at a time. Then I get always this “funny” offset. But is there any workaround to achieve that goal?



    Just to make sure: I need expand: true and showMultiple: 3 in this case :-) … as I just found this.


    Hi Addorange!

    You can add padding or margins or whatever to anything inside of that div (demo),


    Okay, I got it … of course I should improve my search strategy ;-) … I found this one and it helped me out, although I had to wonder a bit till I found that the used images have to be preprocessed and resized as this of course could not be done anymore by the anythingslider resize mechanism … Isn’t there any possibility to give a padding between the images within the anythingslider options? … that would be a great deal :-)

    … Oh, just missed your comment … going to check out your demo, but it is not working at the moment … I will try later on

    Thank you very much!


    Hi Addorange!

    LOL the last thing AnythingSlider needs is more options. When the “resizeContent” option is set to true, it only adds a 100% width and height to the immediate child element in the panel. So if you add an image with an element for a caption, it won’t resize that – there are two children in the panel. But if you wrap those two elements, it will resize the wrapper to fit inside the panel.

    If you know of a better way to do this, I’d love to hear it!

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.