jquery - using 2 jassor slider together in same html -
i trying use full-width-slider.source first slider , below trying use slider-cluster.source in same html page.but in slider-cluster .source slider1options not working neither arrows working nor slider view slider2options , slider3options working same set of codes
first =============== 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$.$easeoutquint, //[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) $captionslideroptions: { //[optional] options specifies how animate caption $class: $jssorcaptionslider$, //[required] class create instance animate caption $captiontransitions: _captiontransitions, //[required] array of caption transitions play caption, see caption transition section @ jssor slideshow transition builder $playinmode: 1, //[optional] 0 none (no play), 1 chain (goes after main slide), 3 chain flatten (goes after main slide , flatten caption animations), default value 1 $playoutmode: 3 //[optional] 0 none (no play), 1 chain (goes before main slide), 3 chain flatten (goes before main slide , flatten caption animations), default value 1 }, $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 }, $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 } }; var jssor_slider1 = new $jssorslider$(containerid, 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 $jssor$.$delay(scaleslider, 30); } scaleslider(); $jssor$.$addevent(window, "load", scaleslider); $jssor$.$addevent(window, "resize", $jssor$.$windowresizefilter(window, scaleslider)); $jssor$.$addevent(window, "orientationchange", scaleslider); //responsive code end }; second ============== thing jquery codes conflicting somewhere var jssorslider1 = new $jssorslider$("slider1_container", slider1options); var slider2options = { $autoplayinterval: 3000, //[optional] interval (in milliseconds) go next slide since previous stopped if slider auto playing, default value 3000 $dragorientation: 0, //[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) $slideshowoptions: { //[optional] options specify , enable slideshow or not $class: $jssorslideshowrunner$, //[required] class create instance of slideshow $transitions: _slideshowtransitions, //[required] array of slideshow transitions play slideshow $transitionsorder: 1, //[optional] way choose transition play slide, 1 sequence, 0 random $showlink: true //[optional] whether bring slide link on top of slider when slideshow running, default value false }, $captionslideroptions: { //[optional] options specifies how animate caption $class: $jssorcaptionslider$, //[required] class create instance animate caption $captiontransitions: captiontransitions_childsliders, //[required] array of caption transitions play caption, see caption transition section @ jssor slideshow transition builder $playinmode: 1, //[optional] 0 none (no play), 1 chain (goes after main slide), 3 chain flatten (goes after main slide , flatten caption animations), default value 1 $playoutmode: 3 //[optional] 0 none (no play), 1 chain (goes before main slide), 3 chain flatten (goes before main slide , flatten caption animations), default value 1 }, $bulletnavigatoroptions: { //[optional] options specify , enable navigator or not $class: $jssorbulletnavigator$, //[required] class create navigator instance $chancetoshow: 2, //[required] 0 never, 1 mouse over, 2 $spacingx: 10, //[optional] horizontal space between each item in pixel, default value 0 $spacingy: 10 //[optional] vertical space between each item in pixel, default value 0 }, $arrownavigatoroptions: { $class: $jssorarrownavigator$, //[requried] class create arrow navigator instance $chancetoshow: 2 //[required] 0 never, 1 mouse over, 2 } }; var jssorslider2 = new $jssorslider$("slider2_container", slider2options); var bannerslider_slideshowtransitions = [ //fade in r {$duration: 1200, x: -0.3, $during: { $left: [0.3, 0.7] }, $easing: { $left: $jssoreasing$.$easeincubic, $opacity: $jssoreasing$.$easelinear }, $opacity: 2 } //fade out l , { $duration: 1200, x: 0.3, $slideout: true, $easing: { $left: $jssoreasing$.$easeincubic, $opacity: $jssoreasing$.$easelinear }, $opacity: 2 } ]; var slider3options = { $autoplayinterval: 3000, //[optional] interval (in milliseconds) go next slide since previous stopped if slider auto playing, default value 3000 $dragorientation: 0, //[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) $slideshowoptions: { //[optional] options specify , enable slideshow or not $class: $jssorslideshowrunner$, //[required] class create instance of slideshow $transitions: bannerslider_slideshowtransitions, //[required] array of slideshow transitions play slideshow $transitionsorder: 1, //[optional] way choose transition play slide, 1 sequence, 0 random $showlink: true //[optional] whether bring slide link on top of slider when slideshow running, default value false }, $bulletnavigatoroptions: { //[optional] options specify , enable navigator or not $class: $jssorbulletnavigator$, //[required] class create navigator instance $chancetoshow: 2, //[required] 0 never, 1 mouse over, 2 $spacingx: 10, //[optional] horizontal space between each item in pixel, default value 0 $spacingy: 10 //[optional] vertical space between each item in pixel, default value 0 }, $arrownavigatoroptions: { $class: $jssorarrownavigator$, //[requried] class create arrow navigator instance $chancetoshow: 2 //[required] 0 never, 1 mouse over, 2 }, $thumbnailnavigatoroptions: { $class: $jssorthumbnailnavigator$, //[required] class create thumbnail navigator instance $chancetoshow: 2, //[required] 0 never, 1 mouse over, 2 $actionmode: 0, //[optional] 0 none, 1 act click, 2 act mouse hover, 3 both, default value 1 $disabledrag: true //[optional] disable drag or not, default value false } }; var jssorslider3 = new $jssorslider$("slider3_container", slider3options); var sliderclusterslideshowoptions = ($jssor$.$isbrowserie() && $jssor$.$browserengineversion() < 8) ? null : { //[optional] options specify , enable slideshow or not $class: $jssorslideshowrunner$, //[required] class create instance of slideshow $transitions: _slideshowtransitions, //[required] array of slideshow transitions play slideshow $transitionsorder: 1, //[optional] way choose transition play slide, 1 sequence, 0 random $showlink: true //[optional] whether bring slide link on top of slider when slideshow running, default value false }; var slidercoptions = { $autoplay: false, //[optional] whether auto play, enable slideshow, option must set true, default value false $autoplayinterval: 3000, //[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, //allows arrow key navigate or not $slideduration: 800, //[optional] specifies default duration (swipe) slide in milliseconds, default value 500 $uisearchmode: 0, //[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). $dragorientation: 3, //[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) $slideshowoptions: sliderclusterslideshowoptions, $captionslideroptions: { //[optional] options specifies how animate caption $class: $jssorcaptionslider$, //[required] class create instance animate caption $captiontransitions: captiontransitions, //[required] array of caption transitions play caption, see caption transition section @ jssor slideshow transition builder $playinmode: 1, //[optional] 0 none (no play), 1 chain (goes after main slide), 3 chain flatten (goes after main slide , flatten caption animations), default value 1 $playoutmode: 3 //[optional] 0 none (no play), 1 chain (goes before main slide), 3 chain flatten (goes before main slide , flatten caption animations), default value 1 }, $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 }, $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 $spacingx: 4, //[optional] horizontal space between each item in pixel, default value 0 $spacingy: 4 //[optional] vertical space between each item in pixel, default value 0 } };
Comments
Post a Comment