hi,
ich möchte einen image slider verwenden. leider hab ich ein kleines problem mit meinen bildern.
eigentlich sollte es normal angezeigt werden, aber stattdessen wiederholt sich das bild immer wieder innerhalb der slider box. wie bekomme ich das geändert?
hier der code: vielleicht hilfreich.
hier der slider:
slider1.png
ich möchte einen image slider verwenden. leider hab ich ein kleines problem mit meinen bildern.
eigentlich sollte es normal angezeigt werden, aber stattdessen wiederholt sich das bild immer wieder innerhalb der slider box. wie bekomme ich das geändert?
hier der code: vielleicht hilfreich.
Code:
/* http://www.menucool.com */
#sliderFrame
{
position: relative;
width:700px;
margin: 0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
width:700px;height:306px;/* Must be the same size as the slider images */
border-radius: 12px;
}
#slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink, #slider .video {
z-index:2;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
position:absolute;
width:440px;
height:auto;
padding:10px 0;/* 10px will increase the height.*/
left:120px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
bottom:10px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
z-index:3;
overflow:hidden;
font-size: 0;
}
#slider div.mc-caption-bg {
/* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
background:Black;/* or any other colors such as White, or: background:none; */
border:1px solid white;
border-radius: 5px;
}
#slider div.mc-caption-bg2 {
background:none;
}
#slider div.mc-caption {
font:bold 15px Arial;
color:#EEE;
z-index:4;
text-align:center;
background:none;
}
#slider div.mc-caption a {
color:#FB0;
}
#slider div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
#slider div.navBulletsWrapper {
top:320px;/* Its position is relative to the #slider */
text-align:center;
background:none;
position:relative;
z-index:5;
}
/* each bullet */
#slider div.navBulletsWrapper div
{
width:11px; height:11px;
border:1px solid #AAA;
background:#EEE;
color:#AAA;
font:normal 9px Arial;
text-align:center;
display:inline-block; *display:inline;
overflow:hidden;cursor:pointer;
margin:0 6px;/* set distance between each bullet*/
border-radius:50%;
box-shadow:inset 0 0 4px #AAA;
}
#slider div.navBulletsWrapper div.active {
border-color:#3E99C6;
background:#259FDC;
color:White;
}
/* --------- Others ------- */
#slider div.loading
{
width:100%; height:100%;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0;
z-index:9;
}
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider div.sliderInner {
overflow:hidden;
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}hier der slider:
slider1.png
. Hatte es nicht direkt gesehen weil es in einer Zeile stand aber schön wenn es nun geht.
