Dazzling Slider Not Loading the First Slide Efficiently

Dazzling
1

Hi,

My Dazzling slider isn’t loading the first slide correctly.
You have to click away from the site (either into a new tab or browser etc) and then click back to it for it to show it properly rendered. That or wait for the second slide to load.
Have you seen or heard of this before?
It’s as if the code for the slider isn’t “high” enough or 1st to load etc.

Also it doesn’t stretch to fit in internet explorer browsers?

Thanks!

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile: In order to check your question i need to see your live website, please provide url and i will take a look

3

Hi Noda,

Yes I am thanks! Hope you are too!
Sure no problem… please see the link below:
http://www.temporary-url.com/F839C

***Could you please not post a link to the site (unless it’s an expiring one like the one above) or any screenshots of it on an open forum please?

Thanks

4

Hi there

Please deactivate all third party plugins and try again your problem, most probably this I conflict with third-party plugins.
Once you deactivate all plugins please check your problem again, if the problem is gone then this means it was a plugin conflict. Now, start activating plugins one by one and same time repeat your problem until your problem appears again, now you know which plugin was in conflict Thanks!
Colorlib Support Team

5

That worked! Thank you!! :slight_smile:
Hey do you know if I can make the slider stretch to fit in the internet explorer browser? It’s perfect in Chrome & Firefox but has white gaps in Internet Explorer for what isn’t that large of a screen to be honest.

Also, is there anyway of adding code to make the slider different proportions when viewed on a Mobile device?
I’d ideally like to make it full screen with the menu bar at the top for Mobiles but even making the image just stretch vertically even a little bit would be awesome?

Thanks!

6

Hello there,

I checked the site and the slider is flushed with the side of the website.

You can use this CSS to change the slider width on mobile but you will have to manually copy the code and change the screen width in the code for different screen sizes:


@media only screen and (max-width: 600px) {
.top-section {
    width: 613px;
    height: auto;
    margin: 0 auto;
}
}

Best Regards,
Support

7

Hi,

That kind of works. I can see it changes the size of the space by pushing the rest of the page down.
But I’d also like the image to stretch the allocated vertical space also.
Is that possible?

(Putting this code in the style.css page btw)

Thanks

8

Actually, thinking about it. It would need to stretch the image more vertically and flow over the sides to not look disproportionate. Would that be an “auto-flow” command with a “center” command?

9

Hello there,

You need to go to Appearance > Customize > Additional CSS and paste the code there. You can also change the height variable like so:


@media only screen and (max-width: 600px) {
.top-section {
    width: 613px;
    height: 800px;
    margin: 0 auto;
}
}

Best Regards,
Support

10

Thank you.
That works but it just leaves a blank space below the image (due to the proportions of the image).

Is it possible to make the image height full mobile screen height and just over flow the remaining width of the image off screen?
It would need it because of it being landscape as normal but making it more portrait on mobile by just over flowing / cutting off the remaining horizontal width of the image.

11

Hello there,

You can try using this CSS:


@media only screen and (max-width: 600px) {
.top-section {
    width: 613px;
    height: 100%;
    overflow: visible;
    margin: 0 auto;
}
}

Best Regards,
Support

12

Hi,

That works great for the top section / .top-section but it doesn’t change the image size also.
Is there another command to change the imageslider? Maybe similar to .sliderimage etc?
Then that way with both commands it should work?

Thanks!

13

Hello there,

The slider is more controlled by Javascript so you would need to enlist the aid of a third party developer, one of which you can find here:
https://colorlib.com/out/envatostudio

Best Regards,
Support