滑块卡在第一张幻灯片上

Question

我在我的脚本中使用了Anythingslider，它适用于所有浏览器（FF，IE），但与Chrome无法工作 并卡在第一张幻灯片中。

我只是在代码发生变化，添加可爱吧，这是我的代码：

小工具中查看：

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