Forums

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
    Posts
  • #30221
    yoyolise
    Member

    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?

    http://thumbspark.com/wordpress/about/

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

    #79952
    Letalos
    Member

    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;
    left:-20px;
    }

    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
    Letalos

    #79650
    yoyolise
    Member

    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.

    #79232
    Snipper
    Member

    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?

    #85044
    TribalDancer
    Member

    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?

    #85050
    serquhart
    Member

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

    #85052
    Mottie
    Member

    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; }
    #88225

    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?

    Thanks

    #88228

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

    #88229
    Mottie
    Member

    Hi Addorange!

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

    #88230

    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!

    #88245
    Mottie
    Member

    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.