Error in displaying image slider in Header

  • Resolved mscreamott

    (@mscreamott)


    1 month, 3 weeks ago

    Hi,

    I have an issue on a slider I created to replace a static logo in the header section. I am using Blocksy theme. I applied it as a HTML code and it works on Desktop but it doesn’t work on tablet or mobile. In these cases, I only see the static image of the first logo in the series.

    That seems to be a limitation where the animation can be applied only to one element on that page. And as the mobile and desktop views are different, the animation gets applied to only the desktop version as that is seen as the first entry on the page.

    Is it possible to modify the slider via code to apply the animation to all the uses?

    Thanks to whoever can help me solve the issue.

    Mattia

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author htmgarcia

    (@htmgarcia)

    1 month, 3 weeks ago

    Hi @mscreamott

    Do you have a link to this slider? I would suggest CSS media queries to target desktop and mobile with different CSS.

    Regards

    Thread Starter mscreamott

    (@mscreamott)

    1 month, 3 weeks ago

    Thanks for answering. The slider ID is [metaslider id="40"]. It’s inserted in one of the fields in the Header of Blocksy theme, in all responsive options. The site is currently under construction so you won’t be able to see the preview.

    I tried multiple CSS solutions without success, maybe the problem is JavaScript-related? thx

    • This reply was modified 1 month, 3 weeks ago by mscreamott.
    • This reply was modified 1 month, 3 weeks ago by mscreamott.
    • This reply was modified 1 month, 3 weeks ago by mscreamott.
    Plugin Author htmgarcia

    (@htmgarcia)

    1 month, 3 weeks ago

    @mscreamott are you using CSS media queries? In particular max-width and min-width conditions constraints.

    Regards

    Thread Starter mscreamott

    (@mscreamott)

    1 month, 3 weeks ago

    Yes, I tried that approach with CSS media queries. Here’s what I tested:

    css/* Hide mobile slider on desktop */ @media (min-width: 769px) { .ct-header-mobile .metaslider { display: none !important; } } /* Hide desktop slider on mobile */ @media (max-width: 768px) { .ct-header-desktop .metaslider { display: none !important; } }

    The problem is that this approach doesn’t work because the MetaSlider JavaScript animation only initializes once on page load. On mobile devices, I still see the first static image without any sliding animation.

    Do you have a JavaScript solution or specific MetaSlider configuration that can force re-initialization on responsive breakpoints?”

    Thank you

    Plugin Author htmgarcia

    (@htmgarcia)

    1 month, 2 weeks ago

    Is not possible to reinitialize the animation.

    About the CSS, try this CSS. Replace 24 with your slideshow ID:

    @media (min-width: 769px) {
    	#metaslider-id-24 {
    		display: none !important;
    	}
    }

    @media (max-width: 768px) {
    	#metaslider-id-24 {
    		display: none !important;
    	}
    }

    Regards

    Thread Starter mscreamott

    (@mscreamott)

    1 month, 2 weeks ago

    I tried to applied that CSS but unfortunately it did not work; on the contrary, it caused the disappearing of the slider both in desktop and mobile views.

    Plugin Author htmgarcia

    (@htmgarcia)

    1 month, 1 week ago

    @mscreamott use only the portion of CSS you need depending the case.

    As example, if you want the slider to be visible in desktop but hidden in tablet and mobile, use this. Replace 24 with the actual slideshow ID.

    @media (max-width: 768px) {
    	#metaslider-id-24 {
    		display: none !important;
    	}
    }

    Slider hidden in desktop but visible in tablet and mobile. Replace 24 with the actual slideshow ID.

    @media (min-width: 769px) {
    	#metaslider-id-24 {
    		display: none !important;
    	}
    }

    Regards

    Plugin Author Steve Burge

    (@stevejburge)

    1 month ago

    Thanks for using MetaSlider. We’ve not heard from you in over a week so are closing this issue for now. Please post back if you have more questions.

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.