问题
Please help!!! slider 3 doesn't work
Javascript
jQuery(document).ready(function ($) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
var jssor_slider2 = new $JssorSlider$("slider2_container", options);
var jssor_slider3 = new $JssorSlider$("slider3_container", options);
});
But if i move slider3 to top then 1 and 2 stops working
This is header header.php
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<meta name="description" content="Colborn Risk Assessment - Home Page" />
<meta name="keywords" content="pet memorial, pet gallery, pet funeral, pet love />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="/media/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/media/css/pages.css"/>
<link rel="stylesheet" type="text/css" href="../media/css/slider.css"/>
<script type="text/javascript" src="../media/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../media/js/jssor.core.js"></script>
<script type="text/javascript" src="../media/js/jssor.utils.js"></script>
<script type="text/javascript" src="../media/js/jssor.slider.mini.js"></script>
<script type="text/javascript" src="../media/js/newSlider.js"></script>
<title>Running Free</title>
</head>`enter code here`
<body>
<div class="maincontainer">
<div class="content">';
echo $header;
Page 1 HTML for index.php
<?php include("header.php"); ?>
Slider 2
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 300px; height: 300px;
overflow: hidden;">
<div><img u="image" src="/media/img/homeSigns/homeSign3.jpg" /></div>
<div><img u="image" src="/media/img/homeSigns/homeSign4.jpg" /></div>
<div><img u="image" src="/media/img/homeSigns/homeSign5.jpg" /></div>
<div><img u="image" src="/media/img/homeSigns/homeSign7.jpg" /></div>
</div>
Page 2 (SLider 3) Not Working
<?php include("header.php"); ?>
<div class="testmonials"><h2><?php echo $testmonials[rand(0,5)]; ?></h2> </div>
<div class="container">
<div class="petmemorialscontent">
<div class="pepetmemorialstext">
<h1> Pet Memorials </h1>
<p>
Running Free offer probably the greatest range of best quality natural stone pet memorials around. We offer sandstones, limestones,
slates, marbles and basalts in a number of shapes, styles and sizes. We use memorial grade materials not low value offcuts and are
passionate about producing unique memorials that are very special yet affordable.
</p>
</div>
<div class="pepetmemorialsmenubox">
<div id="slider3_container" style="position: relative; top: 0px; left: 0px; width: 400px;
height: 300px; ">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 400px; height: 300px;
overflow: hidden;">
<div><img u="image" src="/media/img/petmemorials/picture1_1.jpg" width="400px" height="300px" /></div>
<div><img u="image" src="/media/img/petmemorials/picture1_2.jpg" width="400px" height="300px" /></div>
<div><img u="image" src="/media/img/petmemorials/picture1_3.jpg" width="400px" height="300px" /></div>
<div><img u="image" src="/media/img/petmemorials/picture1.jpg" width="400px" height="300px" /></div>
</div>
<span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 233px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 233px; right: 8px">
</span>
</div>
<a href="Boulders.php">
<h2>Boulders and Cobbles</h2>
</a>
</div>
<div class="pepetmemorialsmenubox">
<div class="steppingrotate"><img src="/media/img/arrowL.png" class="leftArrow2"><img src="/media/img/arrowR.png" class="rightArrow2"></div>
<a href="Stepping_stone.php">
<h2>Stepping Stones, Plaques and Tablets</h2>
</div>
</a>
<div class="clear"></div>
<div class="pepetmemorialsmenubox">
<div class="standingrotate"><img src="/media/img/arrowL.png" class="leftArrow3"><img src="/media/img/arrowR.png" class="rightArrow3"></div>
<a href="Standing_stone.php">
<h2>Standing Stones, Columns and Obelisks</h2>
</div>
</a>
<div class="pepetmemorialsmenubox">
<div class="heartrotate"><img src="/media/img/arrowL.png" class="leftArrow4"><img src="/media/img/arrowR.png" class="rightArrow4"></div>
<a href="Heart_And_Clouds.php">
<h2>Heart and Cloud Plaques</h2>
</div>
</a>
<div class="clear"></div>
</div> <!-- end of petmemorialscontent -->
<?php include("footer.php"); ?>
回答1:
Initialize jssor_slider1 and jssor_slider2 in page 1 and inintialize jssor_slider3 in page 2.
Script in page 1
jQuery(document).ready(function ($) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
var jssor_slider2 = new $JssorSlider$("slider2_container", options);
});
Script in page 2
jQuery(document).ready(function ($) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider3 = new $JssorSlider$("slider3_container", options);
});
来源：https://stackoverflow.com/questions/25326238/jssor-slider-3-not-working