滑塊卡在第一張幻燈片上

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. 在外部AnythingSlider包裝器中添加一個rtl類名稱，然后應用以下CSS（第一部分是修復滑塊的內容；其余部分是可選的，可以從anyslider.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中，滑塊箭頭也會反轉圖像的滑動方向，包括幻燈片放映。 但這是最近更改的（請參閱問題＃526 ）。

此選項仍然需要做一些工作（再次，請參見上面的鏈接問題），因此，如果您要做的只是使滑塊工作而不改變箭頭方向或幻燈片顯示，則使用此代碼僅應用類名（ 演示 ）

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