javascript - Jssor slider implementation -
i've been using jssor slider on few pages , it's been working fine, have problems.. way want hidden @ first , show script. got covered slider won't load.. sake of debugging, have skipped hidden thingy still can't solve this.
i tried clean best could...
i have jquery 2.1.3 , newest bootstrap @ beginning of document
the whole "proper" site available @ http://mirojohansson.com/index_new.html , slider should show on land
jquery(document).ready(function ($) {
var options = { $fillmode: 2, //[optional] way fill image in slide, 0 stretch, 1 contain (keep aspect ratio , put inside slide), 2 cover (keep aspect ratio , cover whole slide), 4 actual size, 5 contain large image, actual size small image, default value 0 $autoplay: true, //[optional] whether auto play, enable slideshow, option must set true, default value false $autoplayinterval: 4000, //[optional] interval (in milliseconds) go next slide since previous stopped if slider auto playing, default value 3000 $pauseonhover: 1, //[optional] whether pause when mouse on if slider auto playing, 0 no pause, 1 pause desktop, 2 pause touch device, 3 pause desktop , touch device, 4 freeze desktop, 8 freeze touch device, 12 freeze desktop , touch device, default value 1 $arrowkeynavigation: true, //[optional] allows keyboard (arrow key) navigation or not, default value false $slideeasing: $jssoreasing$.$easeoutquad, //[optional] specifies easing right left animation, default value $jssoreasing$.$easeoutquad $slideduration: 800, //[optional] specifies default duration (swipe) slide in milliseconds, default value 500 $mindragoffsettoslide: 20, //[optional] minimum drag offset trigger slide , default value 20 //$slidewidth: 600, //[optional] width of every slide in pixels, default value width of 'slides' container //$slideheight: 300, //[optional] height of every slide in pixels, default value height of 'slides' container $slidespacing: 0, //[optional] space between each slide in pixels, default value 0 $displaypieces: 1, //[optional] number of pieces display (the slideshow disabled if value set greater 1), default value 1 $parkingposition: 0, //[optional] offset position park slide (this options applys when slideshow disabled), default value 0. $uisearchmode: 1, //[optional] way (0 parellel, 1 recursive, default value 1) search ui components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). $playorientation: 1, //[optional] orientation play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value 1 $dragorientation: 1, //[optional] orientation drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value 1 (note $dragorientation should same $playorientation when $displaypieces greater 1, or parking position not 0) $bulletnavigatoroptions: { //[optional] options specify , enable navigator or not $class: $jssorbulletnavigator$, //[required] class create navigator instance $chancetoshow: 2, //[required] 0 never, 1 mouse over, 2 $autocenter: 1, //[optional] auto center navigator in parent container, 0 none, 1 horizontal, 2 vertical, 3 both, default value 0 $steps: 1, //[optional] steps go each navigation request, default value 1 $lanes: 1, //[optional] specify lanes arrange items, default value 1 $spacingx: 8, //[optional] horizontal space between each item in pixel, default value 0 $spacingy: 8, //[optional] vertical space between each item in pixel, default value 0 $orientation: 1, //[optional] orientation of navigator, 1 horizontal, 2 vertical, default value 1 $scale: false, //scales bullets navigator or not while slider scale }, $arrownavigatoroptions: { //[optional] options specify , enable arrow navigator or not $class: $jssorarrownavigator$, //[requried] class create arrow navigator instance $chancetoshow: 1, //[required] 0 never, 1 mouse over, 2 $autocenter: 2, //[optional] auto center arrows in parent container, 0 no, 1 horizontal, 2 vertical, 3 both, default value 0 $steps: 1 //[optional] steps go each navigation request, default value 1 } }; //make element 'slider1_container' visible before initialize jssor slider. $("#slider1_container").css("display", "block"); var jssor_slider1 = new $jssorslider$("slider1_container", options); //responsive code begin //you can remove responsive code if don't want slider scales while window resizes function scaleslider() { var bodywidth = document.body.clientwidth; if (bodywidth) jssor_slider1.$scalewidth(math.min(bodywidth, 1920)); else window.settimeout(scaleslider, 30); } scaleslider(); $(window).bind("load", scaleslider); $(window).bind("resize", scaleslider); $(window).bind("orientationchange", scaleslider); //responsive code end }); /* 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 div, .jssorb21 div:hover, .jssorb21 .av { 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; } /* jssor slider arrow navigator skin 21 css */ /* .jssora21l (normal) .jssora21r (normal) .jssora21l:hover (normal mouseover) .jssora21r:hover (normal mouseover) .jssora21ldn (mousedown) .jssora21rdn (mousedown) */ .jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn { position: absolute; cursor: pointer; display: block; 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; } .jssora21ldn { background-position: -243px -33px; } .jssora21rdn { background-position: -303px -33px; } <script src="jquery.min.js"></script> <div id="illu" style="height: 100vh; width:100vw"> <!-- jssor slider begin --> <!-- can move inline styles css file or css block. --> <!-- ================================================== --> <div id="slider1_container" style="display: none; position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 700px; overflow: hidden;"> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 700px; overflow: hidden;"> <div style="background: blue"> </div> <div style="background: blue" /> </div> <div style="background: red"> </div> <div style="background: green"> </div> </div> <!-- bullet navigator container --> <div u="navigator" class="jssorb21" style="position: absolute; bottom: 26px; left: 6px;"> <!-- bullet navigator item prototype --> <div u="prototype" style="position: absolute; width: 19px; height: 19px; text-align:center; line-height:19px; color:white; font-size:12px;"></div> </div> <!-- arrow left --> <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;"> </span> <!-- arrow right --> <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px"> </span> <!-- arrow navigator skin end --> <a style="display: none" href="http://www.jssor.com">bootstrap slider</a> </div> <!-- jssor slider end --> </div> </div>
solved trying again scratch. can't problem i'm glad got fixed.
Comments
Post a Comment