Slider problems

Support
#4

Hi There,

Thanks for updating!

I can still see the gap in few images. Can you please check your slider content if you have some space over there? It might add an extra <br> tag before the image.

Regarding your arrow, I can see it working fine even in the mobile device, Hope it works for you too.

Thanks

#5

I’ve disabled the css you’ve provided, because the website is live and the lack of the arrow is problematic for our public…
What I can say is that your css works fine with removing that gap (strange that it’s only with some images, although they all have the same size), but it has that problem with the navigation arrows, both on desktop and mobile.

#6

I’ve managed to correct the vertical spaces in some images thanks to your screenshot with the linebreak, something I didn’t spot for days… incredible. :stuck_out_tongue:

But the problem with the missing arrows still persists. Any idea how I can solve that?

Regards.

#7

Hi There,

Thanks for the update!

I couldn’t replicate the arrow issue in mind end, The arrow is just fine on all screens.

Hope to help you in any other issue.

Thanks

#8

The problem is only with the first image, and only on first page load.
When the slider ends the first cycle, the arrows are just fine.

Screenshot

#9

Hi there,

Please add this code to your global custom javascript.

jQuery ( document ).ready ( function($) {
setTimeout ( function() { $(window).trigger('resize'); }, 1500 );
} );

Change the value 1500 (1.5seconds) to make sure the resize is trigger after the slider is rendered. Triggering the resize function also re-render the slider which has the arrow.

Thanks!

#10

Hi, Rad.
Thank you for your help.

It’s strange, because when I test that code on the js window, everything is fine and the arrows appear on first load over the first image, but when I go to the live page (both in desktop and mobile) the behaviour is the previous one, with no arrows, even after cleaning the cache.

What am I doing wrong?

PS: In desktop and mobile version, if you pay attention, you can see the arrows coming from below, when the second image of the slider loads. Is it possible the problem stems from there?

#11

Ok, I think I’ve solved the problem!
I wasn’t adding the code to the global js window, but on the page’s js.

Everything seems good now. Thank you for your help!

Anyway, I don’t understand why the navigation arrows appear bellow the first image. Is this normal behaviour?
In the desktop the problem is not very problematic, but in the mobile version it’s very annoying, adding a big gap between the slider and the first article of the grid. Any chance of correcting this?

#12

That is because of the alignnone class which has a bottom margin making your slider’s height taller than your images.

Please add this CSS to your page

.x-slide .alignnone {
    margin: 0
}

Hope that helps.

#13

Thank you, christian_y.

Unfortunately, that didn’t do the trick.
If you load the page with a clean cache, you’ll notice that nothing changed :confused:

It’s not being easy…

#14

I just checked again in incognito and it’s working.

Please clear your browser’s cache again or check in incognito.

Thanks.

#15

Hi, christian_y.
That’s the second image of the slider. The problem appears with the first one, the one from the screenshot I’ve posted here.
After loading the first image, all the others are fine, including in the next cycles of the slider.

#16

Hello There,

This is what I am seeing:

The big gap is the result of the inline css that you added in the column settings. You have added height: 280px;. If you remove it, the gap will no longer display.

I also noticed that you have added a -33px top margin. You can also get rid of that by removing it and use this css instead:

.home .x-container>.offset {
    margin-top: 0;
}

Hope this helps.

#17

Thank you for your help, RueNel.
The problem with the gap was solved! That must have been lost amidst past experiences and I couldn’t find where it was. :roll_eyes:

But the initial problem with the arrows persists. I’m sorry, but the best way to show you what I’m seeing is with a video.
Please, be so kind to download a capture I made and see what I mean:
https://mega.nz/#!OdUnhSRT!4jmzXANOEt4Z6qh2ItLnlV13kAqMhLm2x7FXI2mZO_s

Please, notice what happens when the first image of the slider loads and how the arrows come from below.

#18

Hi there,

I see that the problem is happening only in the Firefox browser. I checked both the Chrome and the Safari browsers and it is working ok.

So this is something that we will add to our issue tracker to be considered later as a bug report.

At the time being you either need to use the slider the way it is or consider using the Revolution Slider instead.

Thank you for your understanding.

#19

Hi, christopher.amirian.
Not the best news, but I’m glad you’ve pinpoint the problem and are considering it to the bug list.

Thank you all for your help with this hairy problem.
Regards.

#20

On behalf of my colleagues, you’re welcome! :slight_smile:

#21

Hi again.
I didn’t try other browsers, but Microsoft Edge also shows this problem.

#22

Thank you for mentioning that. We surely will follow up the case to update the core Javascript library of the Slider element.

As I already mentioned please kindly use the Revolution Slider instead.

Thank you.

#24

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.