I’m using wordpress and I have a slideshow to display on my front page.

index.html:

<div id="displayOnDesktop">
<div id="d1c1_background" class="col-md-4 d1c5">
<div class="fadein"><img src="http://b-software.com/sitedev/wp-content/uploads/2017/05/abb.png" alt="abb_logo" />
<img src="http://b-software.com/sitedev/wp-content/uploads/2017/05/cae.png" alt="cae-logo" />
<img src="http://b-software.com/sitedev/wp-content/uploads/2017/05/Sanofi.png" alt="sanofi_logo" /></div>
</div>
</div>


<div id="displayOnMobile">
    <div id="d1c1_background" class="col-md-4 d1c5">
    <div class="fadein"><img src="http://b-software.com/sitedev/wp-content/uploads/2017/05/abb.png" alt="abb_logo" />
    <img src="http://b-software.com/sitedev/wp-content/uploads/2017/05/cae.png" alt="cae-logo" />
    <img src="http://b-software.com/sitedev/wp-content/uploads/2017/05/Sanofi.png" alt="sanofi_logo" /></div>
    </div>
    </div>

style.css:

#displayOnMobile{
 display:none;
}
#displayOnDesktop{
 display:block;
}
.fadein { 
 position: realtive;
 width:227.5px;
 height:250px; 
}
.fadein img { 
 position:absolute; 
 top:28px;
 left:37px
 }

script.js:

    <script>
jQuery(document).ready(function($){
$(".fadein img:gt(0)").hide();
    setInterval(function(){
      $(".fadein :first-child").fadeOut()
         .next("img").fadeIn()
         .end().appendTo(".fadein");}, 
      1000);
   });
   </script>

For id=displayOnMobile the slideshow works very well but for the id=displayOnDesktop the third image diplayed over the second.How can I fix that to make the slideshow works very well?

Read more here: How to display a slideshow using display:block?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: