StackOverflow にあるこのスライドを再作成していますが、一部の名前がサイトの他の場所で使用されており、競合しているため、タグが異なります。
元の JS Fiddle は次の場所にあります: http://jsfiddle.net/KSHSX/6/
私のサイトに収まるように変更しようとしている JS Fiddle は、http: //jsfiddle.net/owenoneill/KzmTM/1/にあります。
最初のものとして機能するが、div 名が異なり、代わりにタグを使用することで、基本的にまったく同じですが、id/class が異なります。通常、基本的な javascript/css 属性のカスタマイズは問題ありませんが、今回はちょっとしたトラブル。
どんな助けでも大歓迎です、私はもうすぐそこにいるような気がします。
別のマークアップを以下に示します。
ジャバスクリプト:
<script type="text/javascript">
var sliderWidth = 300;
var slider = $('#slidie');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);
$('a.date-nav-prev').click(function () {
$('#slidie').animate({left: '+='+sliderWidth}, 500);
});
$('a.date-nav-next').click(function () {
$('#slidie').animate({left: '-='+sliderWidth}, 500);
});
</script>
HTML:
<a class="date-nav-prev">< Prev</a>
<a class="date-nav-next">Next ></a>
<div id="wrapper">
<div id="slidie">
<div id="daysAgo2">Actions from 2 Days Ago</div>
<div id="yesterday">Yesterday's Actions</div>
<div id="today">Today's Actions</div>
</div>
</div>
CSS:
<style type="text/css">
#wrapper{
width:300px;
height:300px;
border:1px solid #333;
position:relative;
overflow:hidden;
}
#slidie {
width: 1000px !important;
height: 100% !important;
position: absolute;
}
#slidie div {
width:300px;
height:100%;
float:left;
}
#today{background:green;}
#yesterday {background:yellow;}
#daysAgo2 {background:orange;}
</style>
ご意見、ご指示をいただければ幸いです。