滑塊卡在第一張幻燈片上

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