jssor - Arrow Navigation is displayed but does not function -
i using jssor slider 18.0 jquery 1.3.2. arrow navigator show on slides seems disabled. not work , neither style change on hover.
in addition using jssor.slider.mini.js using jquery jsuggest, jquery validate , uupaa-suketrans.js. hope there nothing conflicting.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> var options = { $autoplay: false, $autoplaysteps: 2, $autoplayinterval: 3000, $pauseonhover: 1, $arrowkeynavigation: true, $slideduration: 500, $mindragoffsettoslide: 20, $slidespacing: 0, $cols: 1, $align: 0, $uisearchmode: 1, $playorientation: 1, $dragorientation: 3, $arrownavigatoroptions: { $class: $jssorarrownavigator$, $chancetoshow: 2, $steps: 1 } }; var jssor_slider1 = new $jssorslider$("slider1_container", options); </script>
/* jssor slider arrow navigator skin 12 css */ /* .jssora12l (normal) .jssora12r (normal) .jssora12l:hover (normal mouseover) .jssora12r:hover (normal mouseover) .jssora12l.jssora12ldn (mousedown) .jssora12r.jssora12rdn (mousedown) */ .jssora12l, .jssora12r { position: absolute; /* size of arrow element */ width: 30px; height: 46px; cursor: pointer; background: url(../img/zurple/a12.png) no-repeat; } .jssora12l { background-position: -16px -37px; } .jssora12r { background-position: -75px -37px; } .jssora12l:hover { background-position: -136px -37px; } .jssora12r:hover { background-position: -195px -37px; } .jssora12l.jssora12ldn { background-position: -256px -37px; } .jssora12r.jssora12rdn { background-position: -315px -37px; }
<!-- slide show section --> <!-- jssor slider begin --> <!-- move inline styles css file/block, please specify class name each element. --> <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 543px; height: 320px; "> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 543px; height: 290px; overflow: hidden;"> <?php foreach ... $p): ?> <div> <img u="image" src="<?=$p ?>"/> </div> <?php endforeach; ?> </div> <!--#region arrow navigator skin begin --> <!-- arrow left --> <span u="arrowleft" class="jssora12l" style="top: 123px; left: 0px;"> </span> <!-- arrow right --> <span u="arrowright" class="jssora12r" style="top: 123px; right: 0px;"> </span> <!--#endregion arrow navigator skin end --> </div> <!-- jssor slider end --> <!-- end of slide show section -->
any appreciated.
Comments
Post a Comment