slider image blinking when moving from one to other on my website
-
Hello, if you go to my web site http://premieroptie.nl
then you can see on my home page when the theme slider switch from one image to other than blinks the image . from first image to second image there is no problem but from second image to third image and from third image to first image there is some blinking problem. I have tried by opinion slide show plug in and tried in general settings change the settings but has not helped.
I don’t know how you can solve the problem .
here is the code in CSS
/* Slider
—————————————- */
#slider-wrapper {
width:100%;
height:580px;
overflow:hidden;
position:relative;
}
#slider {
position:relative;
width:100%;
height:580px;
background:url(images/loading.png) no-repeat 50% 50% #f9f9f9;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
display:block;
}/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* 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:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
top:0px;
color:#767575;
width:605px;
font-size:12px;
line-height:22px;
z-index:89;
}
.nivo-caption .nivo-caption-inner {
padding:50px 0 0 40px;
margin:0;
}
.nivo-caption p {margin-bottom:12px;}
.nivo-caption .nivo-caption-inner p > strong {
display:block;
font-family: ‘Open Sans’, sans-serif;
font-size:54px;
font-weight:600;
line-height:65px;
color:#fff;
letter-spacing:-2px;
text-transform:uppercase;
margin-bottom:3px;
}
.nivo-caption .nivo-caption-inner p > em {
display:block;
font-family: ‘Open Sans’, sans-serif;
font-size:34px;
font-weight:400;
font-style:normal;
line-height:41px;
color:#fff;
letter-spacing:-2px;
text-transform:uppercase;
margin-bottom:25px;
}
.nivo-caption .nivo-caption-inner p > em > span {color:#6a6969;}
.nivo-caption .nivo-caption-inner p > span {
display:block;
font-size:15px;
line-height:22px;
color:#fff;
text-transform:uppercase;
}
.nivo-caption .btn {
display:inline-block !important;
height:52px;
padding-left:24px;
color:#404040;
background:url(images/btn-left.png) 0 0 no-repeat;
overflow:hidden;
text-decoration:none;
}
.nivo-caption .btn span {
display:block;
padding-right:24px;
background:url(images/btn-right.png) right 0 no-repeat;;
}
.nivo-caption .btn strong {
display:block;
font-family: ‘Open Sans’, sans-serif;
font-size:22px;
line-height:1.227em;
padding:10px 16px 13px;
font-weight:700;
background:url(images/btn-tail.png) 0 0 repeat-x;
text-transform:uppercase;
}
.nivo-caption .btn:hover {background-position:0 -52px; color:#ededed;}
.nivo-caption .btn:hover span {background-position:right -52px;}
.nivo-caption .btn:hover strong {background-position:0 -52px;}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav {
position:absolute;
z-index:99;
width:100%;
left:0;
bottom:101px;
text-align:center;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
display:inline-block !important;
margin:0 5px;
width:9px;
height:9px;
overflow:hidden;
text-indent:-999em;
border:2px solid #929191;
border-radius:50%;
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* FF4+ */
-ms-transition: all 0.3s ease-out; /* IE10 */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
transition: all 0.3s ease-out;
}
.nivo-controlNav a.active,
.nivo-controlNav a:hover {
border-color:#000;
}.nivo-directionNav {
}
.nivo-directionNav a {
position:absolute;
display:block;
width:36px;
height:35px;
text-indent:-9999px;
border:0;
top:50%;
background:url(images/direction_nav.png) no-repeat 0 0;
}
a.nivo-nextNav {
right:0;
background-position:-36px 0;
}
a.nivo-nextNav:hover {
background-position:-36px -35px;
}
a.nivo-prevNav {
left:0;
background-position:0 0;
}
a.nivo-prevNav:hover {
background-position:0 -35px;
}#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
position:relative;
margin-right:10px;
width:120px;
height:auto;
}.row-top {
width:100%;
background:url(images/row-top-tail.gif) 0 0 repeat-x #3199c4;
border-top:1px solid #f9f9f9;
border-radius:10px 10px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
position:relative;
margin-top:28px;
padding-bottom:17px;
how I can solve this problem?
thank you
hovhannesThe blog I need help with is: (visible only to logged in users)
-
I’m afraid you’re in the wrong forum. This support forum is only for free WordPress.com blogs. http://premieroptie.nl/ is a self-hosted WordPress.ORG install. WordPress.com and WordPress.org are completely separate and different: http://en.support.wordpress.com/com-vs-org/
Please visit the WordPress.org support forum for assistance as we won’t be able to help you here: http://wordpress.org/support/ If you don’t already have a username on that forum, click the register button in the upper right corner so you can post in that forum.
-
- The topic ‘slider image blinking when moving from one to other on my website’ is closed to new replies.
WordPress.com Forums 