Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 12, 2014 at 11:25 pm #208729
    ghrahams

    Hello,

    I have two layer sliders created – one for mobile and one for desktop. I have placed them both on my homepage at wildmtyoga.net

    I would like one of them to display only on mobile and one of them to display only on desktop. I am not sure how to add a class to a specific layerslider.

    Thanks for any help!

    Graham

    January 13, 2014 at 5:53 am #208799
    ghrahams

    I was able to get this to function by placing the following code in the desktop media query:

    #layer_slider_2 {
display: none;
}
    January 13, 2014 at 9:03 am #208817
    Ismael

    Hi!

    Glad you figured it out. You can hide the LayerSlider for desktop using this on Quick CSS or custom.css:

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

}

    Inspect the layer slider’s id then add it inside the media query.

    Cheers!
    Ismael

    January 13, 2014 at 9:39 am #208850
    Dude

    Hey!

    Glad you found a solution :)

    Regards,
    Peter

    April 3, 2014 at 8:54 am #246926
    pako69

    hello
    I also use media query to hide/display Layer Slider, but it’s not (in my opinion) a good way because both the sliders are present in the HTML code so you download extra images that slowdown the page performance on mobile…
    I tried to use two Worpdress plugins to only display the right slides depending of the context (mobile/desktop):

    • mobble
    • Insert PHP

    But it do not work :(

    Here is what I tried:

    [insert_php]
if (is_mobile()) {
echo do_shortcode('[av_layerslider id='10']');
} else {
echo do_shortcode('[av_layerslider id='5']');
}
[/insert_php]

    or

    [insert_php]
if (is_mobile()) {
[/insert_php]
[av_layerslider id='10']
[insert_php]
} else {
[/insert_php]
[av_layerslider id='5']
[insert_php]
}
[/insert_php]
    April 3, 2014 at 8:58 am #246927
    pako69

    EDIT
    It Works !
    With that:

    [insert_php]
if (is_mobile()) {
[/insert_php]
[av_layerslider id='10']
[insert_php]
} else {
[/insert_php]
[av_layerslider id='5']
[insert_php]
}
[/insert_php]
    April 3, 2014 at 9:32 am #246940
    pako69

    it works but something break the layout and I can’t find what…
    I change the code to make it more simple:

    [insert_php] if (!is_mobile()) {[/insert_php] [av_layerslider id='5'][insert_php]}[/insert_php]
[insert_php] if (is_mobile()) {[/insert_php] [av_layerslider id='10'][insert_php]}[/insert_php]

    ie my sample page : http://www.strategies-ecommerce.com/slide

    April 3, 2014 at 4:01 pm #247095
    Ismael

    Hey!

    The wordpress codex added a new function checking if you’re on a mobile device. Please refer to this link: https://codex.wordpress.org/Function_Reference/wp_is_mobile

    Unfortunately, the code won’t work if you’re wrapping the layer slider shortcode because the theme is adding containers to wrap the actual layer slider. If you inspect the code, you’ll see that the layer slider is not entirely hidden. If you really want this, we suggest that you use media query. Maybe add visibility: hidden if you’re worried about the html markup. Adding visibility: hidden is as good as nothing, you don’t have to worry about the other layer slider that is supposed to be hidden slowing the website.

    Regards,
    Ismael

    April 3, 2014 at 4:37 pm #247110
    pako69

    Hello Ismael
    Visibility do not works on layer slider:
    #layerslider_10 {visibility: hidden !mportant;}
    do nothing, the slider remain visible.

    I know wp_is_mobile but:
    – this function is not perfect
    – Anyway, It’s php, so I’m curious to know how to use it with layer slider ?!

    thanks

    April 4, 2014 at 1:23 pm #247432
    Devin

    Hi!

    This kind of customization is beyond what we can help with through support. The theme doesn’t have a method for switching elements on or off on mobile only so doing so would need to be custom coded in.

    When using the shortcode of the layerslider you are going to need to use a do_shortcode function. The theme however disabled the regular LayerSlider shortcodes because of it how it needs to wrap the plugins sliders. There are quite a few hurdles that need to be jumped in order to get something like the above working unfortunately.

    Regards,
    Devin

    April 4, 2014 at 1:39 pm #247444
    pako69

    yep, I understand…
    Enfold will be the best if it was able to manage mobile/tablet/desktop easely :-)

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Different Layerslider Display for Mobile & Desktop’ is closed to new replies.