wordpress サイトに nivo-slider をインストールしました。これは非常にうまく機能します。また、nivo-caption (スライダーの画像にテキストを重ねる) もあります。このテキストバーは、使用する画面解像度に関係なく、スライダー内の同じ位置にある必要があります。その方法がわかりません。私が試しているのは、スライダーのテキストバーは常に画面の解像度に合わせてサイズ変更されます。
サイトは次のとおりです。http://vanschendel.com/wordpress
Css コード nivo-slider: ` /* * jQuery Nivo Slider v3.1 * http://nivo.dev7studios.com
* * Copyright 2012, Dev7studios * MIT ライセンスの下で自由に使用および悪用できます。* http://www.opensource.org/licenses/mit-license.php
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
/*left:0px;*/
/*left:40px;*/
margin:0 auto 0 680px;
bottom:0px;
background:#eaecee;
color:#373737;
/*width:100%;*/
width:5000px;
height:35%;
z-index:8;
padding: 5px 10px;
opacity: 0.9;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}