captions work with 'fade' mode but not 'horizontal' mode

[webguy262]

Captions work with "fade" mode...

http://theinnatbowmanshill.com/newsite/index1.php

But not with "horizontal" mode...

http://theinnatbowmanshill.com/newsite/index.php

Is it the "swipe" code? What am I missing?

Also, can the mode be conditional based on media query?

Fade for desktops; Horizontal for tablets? Why? Ask my client!

[tim-arnold]

On Fri, Feb 22, 2013 at 8:45 AM, webguy262 notifications@github.com wrote:

Captions work with "fade" mode...

http://theinnatbowmanshill.com/newsite/index1.php

But not with "horizontal" mode...

http://theinnatbowmanshill.com/newsite/index.php

Is it the "swipe" code? What am I missing?

Also, can the mode be conditional based on media query?

Fade for desktops; Horizontal for tablets? Why? Ask my client!

— Reply to this email directly or view it on GitHubhttps://github.com/CSS-Tricks/AnythingSlider/issues/497.

Your caption is set to "position: absolute;" which is only a problem if your ".panel" does not have "position" as well to contain it. Your ".panel" only has "position: absolute;" when the ".fade" class is present. Give ".panel" a position while ".fade" is not present and you should be fine. Unless that breaks something else, of course ;)

Tim

tim.arnold@gmail.com

[webguy262]

Thanks Tim! That did it, and nothing seems to break.

How about this...

Also, can the mode be conditional based on media query?

Fade for desktops; Horizontal for tablets? Why? Ask my client!

Is there a way to detect screen resolution and set the slide mode based on viewing device?

[Mottie]

Hi webguy262!

You can test the size of the window before initializing the plugin and set the mode that way... something like:

var windowWidth = $(window).width(),
    sliderMode = windowWidth > 500 ? 'fade' : 'horiz';

$('#slider').anythingSlider({
    mode: sliderMode
});

But if the window was resized, it wouldn't change modes. It should work if you added that snippet inside of a window resize event and updated AnythingSlider afterwards, but I haven't tested that yet.

Also, please try to keep this "issues" section for bugs or enhancement requests. If you have a question about applying or using the slider, please use the CSS-Tricks forums.

[Mottie]

I'm guessing this issue has been resolved, so I'm closing it. If you are still having problems, please respond here and I'll reopen this issue. Thanks!