Dipak Ojha Dipak Ojha - 1 year ago 86
jQuery Question

Two independent jssor sliders in one page

I have used jssor slider in my page. First I used jssor slider only for main banner section. Later I want to include this slider in another feature section. I copied

jssor_1_slider_init = function()
and paste with
jssor_2_slider_init = function()
. But it doesn't work. How to include two independent jssor slider in one page ? The first code is working, second one doesn't work.

<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
jssor_1_slider_init = function() {

var jssor_1_options = {
$AutoPlay: true,
$AutoPlaySteps: 4,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$Cols: 4,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 4
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 1,
$SpacingY: 1
}
};

var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>

<!-- use jssor.slider.debug.js instead for debug -->
<script>
jssor_2_slider_init = function() {

var jssor_2_options = {
$AutoPlay: true,
$AutoPlaySteps: 4,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$Cols: 4,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 4
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 1,
$SpacingY: 1
}
};

var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>


<div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;">
<?php
$query="select img, heading from slide_images order by id desc";
$result=$con->query($query)or die($con->error);
while($row=$result->fetch_assoc()){?>
<div id="non">
<img src="images/<?php echo $row['img'];?>" />
<div u="thumb"><?php echo $row['heading'];?></div>
</div>
<?php } ?>
</div>
</div>

<div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;">
<?php
$query="select img, heading from feature order by id desc";
$result=$con->query($query)or die($con->error);
while($row=$result->fetch_assoc()){?>
<div id="non">
<img src="images/<?php echo $row['img'];?>" />
<div u="thumb"><?php echo $row['heading'];?></div>
</div>
<?php } ?>
</div>
</div>
<script>
jssor_1_slider_init();
jssor_2_slider_init();
</script>

Answer Source

You have two divs with id="jssor_1" but none with id="jssor_2"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download