jssor слайдер 3 не работает

Пожалуйста помоги!!! ползунок 3 не работает

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

        });

Но если я передвину ползунок 3 вверх, то 1 и 2 перестанут работать.

Это заголовок 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;

Страница 1 HTML для 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>

Страница 2 (слайдер 3) не работает

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

person suman315    schedule 15.08.2014    source источник
comment
Пожалуйста, разместите полный код js + html здесь   -  person jssor    schedule 16.08.2014
comment
Привет Jssor, Спасибо, что вернулся быстро. ‹br /› Страница 1   -  person suman315    schedule 18.08.2014
comment
Я отредактировал сообщение с помощью Html и js. Спасибо   -  person suman315    schedule 18.08.2014


Ответы (1)


Инициализируйте jssor_slider1 и jssor_slider2 на странице 1 и инициализируйте jssor_slider3 на странице 2.

Скрипт на странице 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);

        });

Скрипт на странице 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);
    });
person jssor    schedule 18.08.2014
comment
Я использую Google Chorme V 36.0.1985.143. Ползунок 3 находится на другой странице. и если я перемещу var jssor_slider3 = new $JssorSlider$(slider3_container, options); сверху ползунок 3 работает, а 1 и 2 не работают. Спасибо - person suman315; 18.08.2014
comment
В консоли у меня возникает ошибка Uncaught TypeError: невозможно прочитать свойство currentStyle неопределенного на localhost/ media/js/jssor.slider.mini.js G jssor.slider.mini.js:2 Q jssor.slider.mini.js:2 (анонимная функция) jssor.slider.mini.js:2 n jssor .slider.mini.js:2 (анонимная функция) newSlider.js:14 c jquery-1.9.1.min.js:6 p.fireWith jquery-1.9.1.min.js:6 b.extend.ready jquery- 1.9.1.мин.js:6 H jquery-1.9.1.мин.js:6 - person suman315; 18.08.2014
comment
как насчет jssor.com/testcase/3-sliders-in- одностраничный.html? Там такая же ошибка? - person jssor; 19.08.2014
comment
Нет, не на вашей веб-странице, потому что все слайдеры находятся на одной странице. В моем случае у меня есть 2 слайдера на странице 1 и еще один на странице 2. Спасибо. - person suman315; 19.08.2014
comment
Пожалуйста, измените вопрос. Обратите внимание, что вам нужно только опубликовать код с ошибкой. Пожалуйста, разместите весь свой код на странице 2. - person jssor; 19.08.2014
comment
Привет Jssor, Спасибо за ответ. Я отредактировал вопрос. Спасибо - person suman315; 19.08.2014
comment
Привет, Jssor, я сделал то же самое. Создал два разных файла JS, теперь все ползунки работают, но я все еще не понял, почему один файл для всех JS не работает? - person suman315; 20.08.2014
comment
Что ж, оператор «новый $JssorSlider$(slider3_container...» зависит от html-элемента «slider3_container». Но этот элемент существует только на странице 2. - person jssor; 21.08.2014