52387

jssor slider 3 not working

Question:

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">

Pet Memorials

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.

</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"); ?>

Answer1:

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); });

Recommend

  • I don't understand the error i get in this programming code
  • image permissions (don't want them in gallery)
  • PHP Remove url-“not allowed” characters from string
  • How to add a fadeIn effect while changing background image using .css in Jquery
  • How to pick image or video on Android L?
  • Do I use jQuery noconflict to avoid plugins conflict?
  • Is there a 2GB memory usage limit when R boots?
  • Anchor from another page not working in Firefox and IE (works in Chrome)
  • Wordpress - How to change search value using a drop down selector?
  • How to obtain entire Qt StyleSheet for QMacStyle
  • Google sheets current user
  • Increase margins for rotated axis labels with Crossfilter
  • Error “Call to undefined method stdClass::delete()” while trying delete a row in Laravel
  • find xml element by attribute
  • How can I use special characters in angular directives attributes?
  • Convert hex to utf in Python
  • GWT Toolkit: preprocessing files on client side
  • input type=“file” accept=“image/*” doesn't work in phone gap?
  • Get or convert Week of year to ISO week
  • update record in database using jdatabase
  • Convert symmetric matrix between packed and full storage?
  • C++11 variable size POD struct
  • How do you create a Fuseki SPARQL server using the Apache Jena Java API?
  • Enabling DTD support in Sql Server
  • Display java JPanel in a JFrame
  • How can the INSERT … ON CONFLICT (id) DO UPDATE… syntax be used with a sequence ID?
  • QLPreviewController hide print button in ios6
  • Uncaught Error: Could not find module `ember-load-initializers`
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • MySQL WHERE-condition in procedure ignored
  • Web-crawler for facebook in python
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • trying to dynamically update Highchart column chart but series undefined
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Free memory of cv::Mat loaded using FileStorage API
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal