Block Slider, Hide Slider Background on mobile devices

Hello everyone,

1. 
I have an issue previously described here:

https://support.spicethemes.com/index.php?p=/discussion/342/block-slider#latest

however, despite just setting one image in the slider, the slider is still slideable manually (although it is not moving automatically). Being able to slide through a single image obviously deteriorates the mobile experience.

2. 
Furthermore, the image background for the slider is suitable for large screens, but not smaller ones. Thus, I would like to be able to either

a) Not show a background picture in the slider, if the page is opened on mobile or even
b) Change the background image to a provided alternative, if the page is opened on mobile.

All the best
MD 

Comments

  • Hi dziabala

    1. If you want to stop the scroll in slider then kindly follow the below step.

    Install and activate plugin https://wordpress.org/plugins/code-snippets/ Add the new snippets and paste the below link code in this snippets like the screenshot  http://prntscr.com/kxbodx


    2. IF you want to disable the slider on mobile then you can use the below css code in additional css box.

    For this Go to >> Wp-dashboard >> Appearance >> Customize >> Additional css

    @media (max-width: 500px){
        display: none;
    }}

    Let me know did it work.

    Thanks

  • Hello prajapati,

    thank you for your quick reply:

    1.

    Indeed, this disabled the scrolling function in the slider function on desktop. Unfortunately, the slider can still be scrolled on mobile devices!
    This was tested on 3 independent android devices with different browsers and cleared caches.

    2.

    Your solution disables the slider on mobile devices entirely, however this is not the goal. The content of the slider is important, the image is just not suitable for mobile devices. Hence I would like to hide only the BACKGROUND IMAGE on mobile devices, or make the background image DEPENDENT on whether the website is opened on mobile or not.

    Thank you in advance
    MD

  • Hi  dziabala

    OK kindly follow the below steps-

    1. Kindly replace the link code with your code snippets plugin code https://pastebin.com/zBuuh7ia

    2. Remove the above css code from Additional css box and add the below css code in this box.

    @media (max-width: 500px){
        background-image: none !important;
    }
    .owl-carousel .owl-stage-outer {
        height: 300px !important;
    }
    #slider-carousel .item .overlay {
        background-color: transparent !important;
    }
    .owl-carousel .owl-item {
        height: 300px !important;
    }
    }

    Let me know did it work as you need.

    Thanks

  • Hallo prajapati,

    thank you for the clarification. I will try the suggested steps and let you know if they work.

    Thank you,
    MD
  • Hello prajapati,
    thanks again for your help.

    1. Perfect, this solved the problem!

    2. Unfortunately the text does not fit into the box, i tried changing the height values in px in the code, but this disrupted the layout entirely. Hence I have another suggestion:

    I could use your previous approach of hiding the slider on mobile, IF i could also SHOW (only on mobile) a text box in which i could put the same text. Of course it should be in a style fitting to the page. Is this possible?

    Thanks
    MD


  • Kindly share your site url so we can take a look and assist you bettter.

    Thanks
  • Hi prajapati,

    could you give me an e-mail address I could send the url to instead of posting it here publicly? Thank you in advance.

    MD
  • Hi dziabala

    OK, you can share on my email address  jitendrabhana@gmail.com

    Thanks
Sign In or Register to comment.