# Hubspot Image Slider module not loading on pageload

**URL:** <https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697>\
**Category:** CMS Development\
**Created:** [January 11, 2017, 4:46am UTC](https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697 "2017-01-11T04:46:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![subin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/subin/32/29904_2.png) [@subin](https://community.hubspot.com/u/subin)\
**Post date:** [January 11, 2017, 4:46am UTC](https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697/1 "2017-01-11T04:46:08Z")

</div>

Hi all

I have used Hubspot Default image slider module for my website banner. But it seems that when you refresh the page, there is a 0.5 second delay, showing the slider later than the rest of the page.

See here, and make sure to try and refresh the page:

[https://goo.gl/SiJa2E](https://goo.gl/SiJa2E)

![Refresh - 0.5 seconds delay slider - Fostering Talent.gif](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/9/f90854fbfefbb6004e593eba92506b6552f165fe.gif)

Can anyone advice me to load the the slider with out any delay?

Thanks

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [January 11, 2017, 2:12pm UTC](https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697/2 "2017-01-11T14:12:30Z")

</div>

The reason is because the slider script is waiting until all the images load before displaying them. I think a better solution would be to display the first image so that the page doesn’t have to reflow later on. Try adding this CSS to your stylesheet to fix the issue:

```auto
.hs_cos_flex-slides > li:first-child {
 display: block;
}

```

---

<div class="post-metadata">

**Author:** ![subin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/subin/32/29904_2.png) [@subin](https://community.hubspot.com/u/subin)\
**Post date:** [January 12, 2017, 4:26am UTC](https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697/3 "2017-01-12T04:26:40Z")

</div>

Thanks for your reply @stefen, the css works well for me

Thanks

---

<div class="post-metadata">

**Author:** ![luiscosio](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/luiscosio/32/18373_2.png) [@luiscosio](https://community.hubspot.com/u/luiscosio)\
**Post date:** [May 2, 2017, 4:06pm UTC](https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697/4 "2017-05-02T16:06:56Z")

</div>

Whenever the slider changes, there is a small delay until the image loads. Is there any way to preload all slider images?

You can see it in action here:

> **[iNBest | Forward Deployed AI, Cloud, Security](https://www.inbest.cloud/)**
>
> iNBest deploys AI, cloud, and security systems with GuidancePlex, partner platforms, managed operations, and products like Obok.

There is a small delay on the first slider (even with the CSS code provided) and subsequent slides take a bit to load as well.

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [May 2, 2017, 5:46pm UTC](https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697/5 "2017-05-02T17:46:21Z")

</div>

@luiscosio it’s lazy loading the images. Unfortanately, I don’t think there is a way to override the hubspot module in that way - you’d have to make your own custom module to control it.

---

<div class="post-metadata">

**Author:** ![workrails](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/workrails/32/47092_2.png) [@workrails](https://community.hubspot.com/u/workrails)\
**Post date:** [October 9, 2017, 6:17pm UTC](https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697/6 "2017-10-09T18:17:14Z")

</div>

Hi,

I am experiencing the same problem and the css snipet provided as the answer is not working for me. When I go to your site now it seems you fixed it. What was the best solution you found?

---

<div class="post-metadata">

**Author:** ![Online911](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/online911/32/203175_2.png) [@Online911](https://community.hubspot.com/u/Online911)\
**Post date:** [July 8, 2024, 1:17pm UTC](https://community.hubspot.com/t/hubspot-image-slider-module-not-loading-on-pageload/697/7 "2024-07-08T13:17:19Z")

</div>

hi guys i added images to the slide but not displpayed why? anyone can help me
