2013-11-22 2 views
0

Я решил взять свой следующий веб-дизайн перехода, и я думал, что буду работать с Nivoslider.Проблемы с дисплеем со стрелками на слайдере Nivo

Я не могу получить стрелки для отображения! Они действительно работают, хотя они невидимы - при переходе к следующему и предыдущему слайду.

Вот мой NIVO CSS код:

/* Nivo Slider Starts CSS starts Here */ 

.nivoSlider { 
    position:relative; 
    width:95%; 
    height:auto; 
    overflow: hidden; 
} 
.nivoSlider img { 
    position:absolute; 

    max-width: none; 
} 
.nivo-main-image { 
    display: block !important; 
    height: auto !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; 
    background:white; 
    filter:alpha(opacity=0); 
    opacity:0; 
} 
/* 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; 
    bottom:40px; 
    background:#000; 
     height:30px; 
    color:#fff; 
    width:100%; 
    z-index:8; 
    padding: 5px 10px; 
    opacity: 0.5; 
    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+ */ 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.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:1000; 
    cursor:pointer; 
     display:block; 
     height: 30px; 
     width: 30px; 
     text-indent:9999px; 
     background: url(arrows_1.png); 
     background-repeat:no-repeat; 
     opacity: 1; /* NEW */ 
     -webkit-transition: all 200ms ease-in-out; 
     -moz-transition: all 200ms ease-in-out; 
     -o-transition: all 200ms ease-in-out; 
      transition: all 200ms ease-in-out; 

} 
a.nivo-prevNav { 
    left:15px;   
} 
a.nivo-nextNav { 
    right:15px; 

} 
/* Control nav styles (e.g. 1,2,3...) */ 
.nivo-controlNav { 
    position: absolute; 
    top:600px; 
    padding: 15px 0; 
     width:100px; 
     float:right; 


} 
.nivo-controlNav a { 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 


/* Nivo Slider Ends CSS starts Here */ 
/

Я пробовал кучу разных вещей, но еще ничего не работало, а теперь мой мозг жарится.

Буду признателен за любую помощь! Большое спасибо, ребята. -PJ

+0

Неправильный путь к изображению. background: url ("arrows_1.png"); – drip

+0

Ну ... это могло быть так. Но разве вы не увидите, что файл изображения по умолчанию отсутствует, где должны быть стрелки, если это так? – Peege151

+0

изображение отсутствует в папке с изображениями, оно находится в том же каталоге, что и index.php. Я добавил цитаты, как вы уже выше - все еще не работает. – Peege151

ответ

1

Браузер говорит мне, что нет файла под названием «arrows_1.png». Вероятно, у вас есть неправильный путь к файлу.

.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:1000; 
    cursor:pointer; 
    display:block; 
    height: 30px; 
    width: 30px; 
    text-indent:9999px; 
     background: url(arrows_1.png);//here is the error. 
    background-repeat:no-repeat; 
    opacity: 1; /* NEW */ 
    -webkit-transition: all 200ms ease-in-out; 
    -moz-transition: all 200ms ease-in-out; 
    -o-transition: all 200ms ease-in-out; 
    transition: all 200ms ease-in-out; 
} 
+0

Это URL, который использует ваш CSS. http://emmymudgemusic.com/CSS/arrows_1.png Вам нужно изменить URL-адрес, чтобы прочитать 'background: url ('/ arrows_1.png'); – Jacques

+0

Это правильно. В CSS это относительно того, где CSS, а не файл PHP. Если ваш CSS находится в '