スクリプトで 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> </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')); ?>
<div id="nav-slider">
<span></span>
<span></span>
<span></span>
</div>
<br /><br />
</div>
このテスト リンク: http://t.illaf.net/new/trainers/117