javascript - slider 卡在第一张幻灯片上

Question

我在我的脚本中使用了 Anythingslider ，它适用于所有浏览器(FF、IE)，但不起作用使用 Chrome 并卡在第一张幻灯片中。

我只是更改代码以添加可爱的栏，这是我的代码:

小部件 View :

        <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

slider 卡在第一张幻灯片上的原因是因为它被设置为与 LTR 页面一起使用。

因此，要使其在 RTL 页面上正常工作，您需要将 playRtl 选项设置为 true ( docs )。此选项可以执行多项操作。

1. 将 rtl 类名添加到外部 AnythingSlider 包装器，然后应用以下 css(第一部分将修复 slider ；其余部分是可选的，可以从everythingslider.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 中， slider 箭头还会反转图像滑动的方向，包括幻灯片；但这最近发生了变化(请参阅 issue #526 )。

此选项仍然需要一些工作(再次参见上面链接的问题)，因此，如果您只想使 slider 工作而不更改箭头方向或幻灯片，则使用此代码仅应用类名 ( demo )

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