How can I fix my slideshow, it keeps loading without displaying pictures on Android

Question

This is the code:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script language="javascript">'use strict';$(function() {var width = 720; var animationSpeed = 2500; var pause = 5000; var currentSlide = 1;var $sdr2337 = $('#sdr2337'); var $slideContainer = $('.sld', $sdr2337); var $sld = $('.slide', $sdr2337); var interval; function startsdr2337() { interval = setInterval(function() { $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {if (++currentSlide === $sld.length) {currentSlide = 1; $slideContainer.css('margin-left', 0); }});}, pause);} function pausesdr2337() {clearInterval(interval);}$slideContainer.on('mouseenter', pausesdr2337).on('mouseleave', startsdr2337);startsdr2337();});</script><div style="width: 720px; margin: 0 auto;"><div style="position: relative; width: 720px; "><style type="text/css">#gpoy {position: absolute; right:-168px; top:3px; padding: 8px 0px 3px; z-index:99; opacity: 0.9; transition: 1s;  line-height: 12px;}.repper {width: 726px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 20px; box-shadow: 7px 7px 9px #888888 ;}.repper:hover #gpoy {transition: 2s; right:23px; }</style><div class="repper"><div id="gpoy"><a style="font-weight: normal;  text-shadow: 1px 1px #555555; color: #FFFFFF; text-decoration:none; font-size: 8pt; line-height:10px; font-family: arial;" href="http://www.123-slideshow.com" target="_blank">&#127817; CSS3 Slider</a></div><style type="text/css">#sdr2337 {width: 720px; height: 400px; border: 3px solid #FFFFFF; border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; }#sdr2337 .sld {width: 2880px; height: 400px;  display: block; margin: 0; padding: 0;}#sdr2337 .slide {width: 720px; height: 400px; float: left; list-style-type: none;}.DOT180906 {position: absolute; max-width: 720px; margin: 0px;}.c128165  {position: absolute; bottom: 0px; width:100%;  padding: 12px; background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF; font-size:24pt; font-family:Tahoma; text-align:center; line-height:48px; z-index:33; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}</style>

<div id="sdr2337">
<ul class="sld">

<li class="slide slide1">
 <figure class="DOT180906">
  <img src="https://3.bp.blogspot.com/-Z5b_SCr5Nck/W44VsqizSHI/AAAAAAAACas/GC6fdSiHFbYprgCByBGqiFQjVaG15mEqQCLcBGAs/s1600/images%25286%2529.jpg" />
 <figcaption class="c128165">
The attitude of Failure
</figcaption> 
 </figure>
 </li>

<li class="slide slide2">
 <figure class="DOT180906">
 <a href="http://#" target="_blank"> <img src="123-slideshow/knowledge.png" />
 <figcaption class="c128165">
Knowledge
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide3">
 <figure class="DOT180906">
 <a href="http://#" target="_blank"> <img src="123-slideshow/the-best-way-to-save.jpg" />
 <figcaption class="c128165">
The best way to save
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide1">
 <figure class="DOT180906">
  <img src="123-slideshow/the-attitude-of-failure.jpg" />
 <figcaption class="c128165">
The attitude of Failure
</figcaption> 
 </figure>
 </li>

</ul></div></div></div>
</div>

Answer 1

I found the answer to my question and I'm willing to share in case someone else have this same question in the future. Information I would have provided include: Name of site- www.knowseeker.com Platform- blogger Template- custom

Now, the slider code above should work in any html widget. The real problem was were I inserted it. [Search for tutorials on how to code for slider with css and js if you are a novice on that topic.] The slider widget for my template provided by sorella templates is already configured to display slides pointing to my posts depending on the label you provided.

The default field has some items as follows: 5/Fashion/slider which represents (number of post slides to display)/(labels of posts to display)/(slider, to evoke the script)

So you don't need to insert any code here. Simply revert to default code by typing the format I provided above you have already replaced the code. Use any label you desire and ensure that your desired posts also have that label.