Слайдер застрял на первом слайде

Question

Я использовал Anythingslider в своем скрипте, он работает со всеми браузерами (FF, IE), но не работает с Chrome и застрял на первом слайде.

Я просто изменить в коде, чтобы добавить милый бар, и это мой код:

Widget Вид:

 <link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/anythingslider.css">  
     <script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.anythingslider.js"></script> 


    <!-- Define slider dimensions here --> 
    <style> 


    /*** Set Slider dimensions here! Version 1.7+ ***/ 
/* added #slider li to make panels the same size in case "resizeContents" is false */ 
#slider { 
    width: 715px; 
    height: 230px; 
    list-style: none; 
    float: right; 
    margin-right: -60px; 
    direction: ltr; 


} 
.anythingSlider { 
display: block; 
overflow: visible !important; 
position: relative; 
} 
#nav-slider { 
    text-align: center; 
    float: right; 
    margin-top: -20px; 

} 
#nav-slider ul, #nav-slider span { 
    display: inline-block; 
    padding-right: 0.3px; 
} 
#nav-slider li { 
    display: inline-block; 
    padding: 1px; 
} 

#nav-slider a { 
    display: inline-block; 
    width: auto; 
    height: 10px; 

    padding: 8px; 
    text-align: center; 
    text-decoration: none; 
    color: #999; 
    font-size:20px; 
} 
#nav-slider a:hover { } 
#nav-slider a.cur { } 
#nav-slider a.start-stop { } 
#nav-slider a.start-stop.playing {} 



    </style> 

     <!-- AnythingSlider initialization --> 
    <script> 
     // DOM Ready 
     $(function(){  

$('#slider').anythingSlider({ 

    startText   : "<img src='<?php echo Yii::app()->baseUrl ; ?>/images/play.png'>", // Start button text 
    stopText   : "<img src='<?php echo Yii::app()->baseUrl ; ?>/images/puss.png'>", // Stop button text 
    forwardText   : "<img src='<?php echo Yii::app()->baseUrl ; ?>/images/prv.png'>", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image) 
    backText   :"<img src='<?php echo Yii::app()->baseUrl ; ?>/images/next.png'>" , // Link text used to move the slider back (hidden by CSS, replace with arrow image) 
    // A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null 
    appendBackTo: $('#nav-slider span:eq(0)'), 
    appendControlsTo: $('#nav-slider span:eq(1)'), 
    appendForwardTo: $('#nav-slider span:eq(2)'), 


    // Details at the top of the file on this use (advanced use) 
    navigationFormatter: function(index, panel) { 
     // This is the default format (show just the panel index number) 
     return "" + index; 
    } 
}); 



}); 
    </script> 






    <!-- END AnythingSlider --> 


     <div class="my_footer_block_trainer" > 
     <h1 style="text-align: right;">أخبار المدرب</h1> 


       <div id="slider"> 

       <?php 

       $i=3; 
       foreach($newse as $value):?> 

       <?php if($i % 3==0):?> 
       <div> 
       <?php endif; ?>  
     <table width="200px" style=" display:inline; 

margin:0; 
padding:.9em; 
zoom: 1; 


"> 
    <tr > 
     <td width="200px" style="text-align:center ;"> 

     <?php echo CHtml::image(Yii::app()->baseUrl."/news_images/".$value->t_img,$value->title,array('width'=>'182px','heghit'=>'182px','style'=>'display: inline-block;')); ?></td> 
    </tr> 
    <tr> 
     <td width="200px" style="text-align:right ;"> 

<div class="title" style="display: inline-block;"> <?php echo CHtml::link($value->title.$i,array('site/news','id'=>$value->news_id));?></div> 
</td> 
    </tr> 
    <tr> 
     <td width="200px" style="text-align:center ;"> 
     <div class="date" style="display: inline-block;"> 
       <div class="date" style="display: inline-block;"><?php echo $value->p_date ; ?></div> 
     <p>&nbsp;</td> 
    </tr> 
</table> 



      <?php $i++;?> 
       <?php if($i % 3 ==0):?> 
       </div> 

       <?php endif; ?> 


      <?php endforeach ;?> 
        </div>  
      <br /> 
      <?php echo CHtml::link("مركز الاخبار",array('site/newslist'),array('class'=>'reg-now')); ?> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          <div id="nav-slider"> 
    <span></span> 
    <span></span> 
    <span></span> 

</div> 
<br /><br /> 

      </div> 

ссылка теста: http://t.illaf.net/new/trainers/117

Answer 1

Причина ползунок застрял на первый слайд - это то, что он настроен на работу со страницей LTR.

Для правильной работы с RTL-страницей вам необходимо установить playRtl вариант true (docs). Этот вариант делает несколько вещей.

1. Добавляет имя rtl класса к внешней AnythingSlider обертке, которая затем применяется следующий CSS (первая часть, что будет фиксировать ползунок, остальное не является обязательным и может быть удалено из файла anythingslider.css)

   /* slider autoplay right-to-left */ 
   .anythingSlider.rtl .anythingWindow { 
       direction: ltr; 
       unicode-bidi: bidi-override; 
   } 
   /* move nav link group to left */ 
   .anythingSlider.rtl .anythingControls ul { float: left; } 
   /* reverse order of nav links */ 
   .anythingSlider.rtl .anythingControls ul a { float: right; } 
   /* move start/stop button - in case you want to switch sides */ 
   .anythingSlider.rtl .start-stop { /* float: right; */ } 
   

2. В старых версиях AnythingSlider стрелки слайдера также изменяют направление скольжения изображения, включая слайд-шоу; но это было недавно изменено (см. issue #526).

Этот вариант еще нуждается в некоторой работе (опять же, см вопроса, связанный выше), так что если все, что вам нужно сделать, это просто сделать слайдер работу и не менять направление стрелки или слайд-шоу, а затем использовать этот код только применить имя класса (demo)

$('#slider').anythingSlider({ 
    playRtl: false, 
    onInitialized: function(e, slider) { 
     slider.$wrapper.addClass('rtl'); 
    } 
});