0
現在、jQueryスライドショープラグインを変更しようとしています。私がしようとしているのは、html要素のセットの最初のスライドの代わりに、ページの読み込み時に中央のスライドを最初に表示させることです。私はすでに半透明のレイヤーをスライダーの両面をカバーし、中間のスライドを見えるようにする予定であるので、オーバーフローを可視化することができました。SimpleSlide Jquery sideshow mod?
マイ修正スライダーがhere
を見つけることができ、変更されたプラグインのjsファイルはhere
CSS/HTMLを見つけることができます:
<style type="text/css">
.simpleSlide-container {
margin: auto 0 auto 0;
width: 496px;
height: 300px;
}
.simpleSlide-window {
margin-left: 48px;
}
.buttons {
height: 48px;
width: 496px;
margin-top: -174px;
z-index: 9999;
}
.left-button {
background-image: url(arrows-left.png);
background-color: transparent;
background-repeat: no-repeat;
height: 48px;
width: 48px;
background-position: -0px -0px;
z-index: 9999;
position:relative;
left: 24px;
}
.left-button:hover {
height: 48px;
width: 48px;
background-position: -48px -0px;
}
.right-button {
background-image: url(arrows-right.png);
background-color: transparent;
background-repeat: no-repeat;
height: 48px;
width: 48px;
background-position: -0px -0px;
z-index: 9999;
position: relative;
left: 424px;
bottom: 48px;
}
.right-button:hover {
height: 48px;
width: 48px;
background-position: -48px -0px;
}
</style>
<body>
<div class="simpleSlide-container">
<div class="simpleSlide-window" rel="group_name">
<div class="simpleSlide-tray" rel="group_name">
<div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;">
<div><img src="13.jpg" /></div>
</div>
<div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;">
<div><img src="30.jpg" /></div>
</div>
<div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;">
<div><img src="31.jpg" /></div>
</div>
</div>
</div>
<div class="buttons">
<div class="left-button" rel="group_name"></div>
<div class="right-button" rel="group_name"></div>
</div>
</div>
</body>
おかげ