Search code examples
jssor

Text overlay when loading the page

I have added a paragraph in the slider.

<div>
  <a>
    <img src="image.jpg"/>
    <p>Some texts</p>
  </a>
<div>

The paragraph is display on top of the image.The slider works fine after finishing loading the whole page. However, when the page is loading, I can see all of the paragraph for each slide show in the same time. I only want it shows the first slide paragraph when loading. Can anyone please help?

Solution

  • You can display only one slide and hide all other slides (by specifying style="display: none;") at the beginning.

    <div u="slides" ...>
    <div>
      <a>
        <img src="image.jpg"/>
        <p>Some texts</p>
      </a>
    <div>
    <div style="display: none;">
      ...
    <div>
</div>

    Or you can use jssor slider no-jquery version, it will initialize jssor slider immediately without waiting for page load.