i downloaded script slider show , work without problems after implemented slide show have problems seo optimalization in html5. because code using <div u=""> or <img u=""> , still write me cant use combination div tag "u".
this full script slideshow:
<!-- jssor slider begin --> <!-- move inline styles css file/block, please specify class name each element. --> <!-- ================================================== --> <div id="slider1_container" style="display: none; position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"> <!-- loading screen --> <div u="loading" style="position: absolute; top: 0px; left: 0px;"> <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"> </div> <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"> </div> </div> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;"> <div> <img u="image" src2="../img/1920/red.jpg" /> </div> <div> <img u="image" src2="../img/1920/purple.jpg" /> </div> <div> <img u="image" src2="../img/1920/blue.jpg" /> </div> </div> <!--#region bullet navigator skin begin --> <!-- help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html --> <style> /* jssor slider bullet navigator skin 21 css */ /* .jssorb21 div (normal) .jssorb21 div:hover (normal mouseover) .jssorb21 .av (active) .jssorb21 .av:hover (active mouseover) .jssorb21 .dn (mousedown) */ .jssorb21 { position: absolute; } .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av { position: absolute; /* size of bullet elment */ width: 19px; height: 19px; text-align: center; line-height: 19px; color: white; font-size: 12px; background: url(../img/b21.png) no-repeat; overflow: hidden; cursor: pointer; } .jssorb21 div { background-position: -5px -5px; } .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; } .jssorb21 .av { background-position: -65px -5px; } .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; } </style> <!-- bullet navigator container --> <div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px;"> <!-- bullet navigator item prototype --> <div u="prototype"></div> </div> <!--#endregion bullet navigator skin end --> <!--#region arrow navigator skin begin --> <!-- help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html --> <style> /* jssor slider arrow navigator skin 21 css */ /* .jssora21l (normal) .jssora21r (normal) .jssora21l:hover (normal mouseover) .jssora21r:hover (normal mouseover) .jssora21l.jssora21ldn (mousedown) .jssora21r.jssora21rdn (mousedown) */ .jssora21l, .jssora21r { display: block; position: absolute; /* size of arrow element */ width: 55px; height: 55px; cursor: pointer; background: url(../img/a21.png) center center no-repeat; overflow: hidden; } .jssora21l { background-position: -3px -33px; } .jssora21r { background-position: -63px -33px; } .jssora21l:hover { background-position: -123px -33px; } .jssora21r:hover { background-position: -183px -33px; } .jssora21l.jssora21ldn { background-position: -243px -33px; } .jssora21r.jssora21rdn { background-position: -303px -33px; } </style> <!-- arrow left --> <span u="arrowleft" class="jssora21l" style="top: 123px; left: 8px;"> </span> <!-- arrow right --> <span u="arrowright" class="jssora21r" style="top: 123px; right: 8px;"> </span> <!--#endregion arrow navigator skin end --> <a style="display: none" href="http://www.jssor.com">bootstrap slider</a> </div> <!-- jssor slider end --> i tried convert style code css after slider dont work. because deleted tag "u" , used "class" style. after dont work.
this css file try convert style html css dont work this:
#slider1_container { display: none; position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 580px; overflow: hidden; } .slider_background { background-position: center top; background-color: black; background-repeat: no-repeat; background-attachment: scroll; background-position: 0% 0%; background-clip: border-box; background-origin: padding-box; background-size: 100% 100%; width: 100%; height: 580px; } .loading { position: absolute; top: 0px; left: 0px; } #slider_filter { filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; } .slides { cursor: move; position: absolute; left: 0px; top: 0px; width: 100%; height: 580px; overflow: hidden; } .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av { position: absolute; /* size of bullet elment */ width: 19px; height: 19px; text-align: center; line-height: 19px; color: white; font-size: 12px; background: url(../img/b21.png) no-repeat; overflow: hidden; cursor: pointer; } .jssorb21 div { background-position: -5px -5px; } .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; } .jssorb21 .av { background-position: -65px -5px; } .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; } .jssora21l, .jssora21r { display: block; position: absolute; /* size of arrow element */ width: 55px; height: 55px; cursor: pointer; background: url(../img/a21.png) center center no-repeat; overflow: hidden; } .jssora21l { background-position: -3px -33px; } .jssora21r { background-position: -63px -33px; } .jssora21l:hover { background-position: -123px -33px; } .jssora21r:hover { background-position: -183px -33px; } .jssora21l.jssora21ldn { background-position: -243px -33px; } .jssora21r.jssora21rdn { background-position: -303px -33px; } #slider_image { position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%; } here website stil trying implemented without html errors seo optimalization.
output errors
please use class name instead of id define css.
.slider1_container { ... } to pass html validation please replace u attribute data-u.
reference: http://www.jssor.com/development/pass-html-validation.html
Comments
Post a Comment