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）。这个选项做了几件事。

将一个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; */ }

在旧版本的AnythingSlider中，滑块箭头也反转了图像滑动的方向，包括幻灯片放映;但最近有所改变（见issue #526）。

此选项仍然需要一些工作（再次，请参阅上面链接的问题），所以如果你只想让滑块工作而不是改变箭头方向或幻灯片，那么使用这个代码只应用班级名称（demo）

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

滑块卡在第一张幻灯片上

1 个答案: