Почему Слайдер «не видит» фото?

Question

[Катя]

Почему слайдер не видит фото? ((((((((((( Уже часов 5 сижу и слайдера 4 перепробовала...
Скачала готовый код для слайдера

HTML код

</div>
    <ul class="cover-slider">
        <li class="cover-slider__slide">
            <span class="hide">Alt Tag</span>
        </li>
        <li class="cover-slider__slide">
            <span class="hide">Alt Tag</span>
        </li>
        <li class="cover-slider__slide">
            <span class="hide">Alt Tag</span>
        </li>
        <li class="cover-slider__slide">
            <span class="hide">Alt Tag</span>
        </li>
    </ul>
</div>

CSS код

.cover-slider__slide:nth-child(1) {
  background-image: url("https://unsplash.it/640/480");
}
.cover-slider__slide:nth-child(2) {
  background-image: url("https://unsplash.it/641/480");
}
.cover-slider__slide:nth-child(3) {
  background-image: url("https://unsplash.it/641/481");
}
.cover-slider__slide:nth-child(4) {
  background-image: url("https://unsplash.it/643/482");
}

Меняю ссылку на другое фото
https://unsplash.it/640/480 =>> https://unsplash.com/photos/nvtJoYiIM2Q
или
https://unsplash.it/640/480 =>> background-image: url("img/1.png");
НЕ ВИДИТ..... ((( только пустое белое окошко показывает....

background-size: cover;
background-position: center;
repeat: no-repeat;
Эти 3 строки тоже добавляла, всё равно не работает.... И так 4 разных слайдера...
В чём может быть причина? Раньше такого не было...

Comments

[Dymok]

Выложите код на codepen или jsfiddle

[Алекс Глебов]

Возможно , div открывается сразу закрытым тегом

[Катя]

UnluckySerivelha,
Здравствуйте!
Я как раз оттуда его скачала: https://codepen.io/tcmulder/pen/YPmrvB

[Алекс Глебов]

А js перенесли?
jquery эту //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

[Катя]

Алекс Глебов,
Вроде, да. В конце HTML кода

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

[Алекс Глебов]

ну надо ваш код смотреть

[Катя]

Алекс Глебов,
https://codepen.io/tcmulder/pen/YPmrvB
Отсюда скачала этот слайдер. Посмотрите, пожалуйста~

Работающий код, поменяла только ссылку на другое фото.

Answer 1

[Froggyweb]

Это ссылка на страницу с фото, а не на фото
https://unsplash.com/photos/nvtJoYiIM2Q

Вот ссылка на картинку
https://images.unsplash.com/photo-1494719019271-7b...

Comments

[Катя]

OMG! Вы супер! ) Работает! Большое спасибо!

А почему может не показывать, когда ссылаюсь на фото в папке?
1.jpg находится в той же папке, что и index.html
Размер фото 570 х 430 px
Размер фото по умолчанию со слайдера 640 х 480 px

.cover-slider__slide:nth-child(1) {
  background-image: url("https://images.unsplash.com/photo-1494719019271-7bfff81660d2?ixlib=rb-0.3.5&s=5378c542039b420c1690dd7964c4509c&auto=format&fit=crop&w=1050&q=80");
}
.cover-slider__slide:nth-child(2) {
  background-image: url("1.jpg");
}
.cover-slider__slide:nth-child(3) {
  background-image: url("https://unsplash.it/641/481");
}
.cover-slider__slide:nth-child(4) {
  background-image: url("https://unsplash.it/643/482");
}

[Froggyweb]

потому что фото находится не в той папке в которой лежит css.

[Катя]

Froggyweb,
Ааааа...... Ё.П.Р.С.Т....... как всё запутано...

ОГРОМНОЕ СПАСИБО!!!!!!!
Всё работает наконец-то!! ^________^

Answer 2

[leni_m]

а без слайдера видны фото?