Что нужно исправить?

Question

[ChrisMenschenin]

Здравствуйте.
Только познакомился с Slick Slider, и, конечно же, не могу найти ошибку (а скорее всего, ошибки) в коде. Вместо слайдов выдаёт просто изображения, расположенные друг за дружкой по вертикали. Вот код всей части со слайдами:

<div id="slider">
                    <div class="fade">
                        <div class="item"><img src="Foto/Slide1.jpg" alt=""></div>
                        <div class="item"><img src="Foto/Slide2.jpg" alt=""></div>
                        <div class="item"><img src="Foto/Slide3.jpg" alt=""></div>
                        <div class="item"><img src="Foto/Slide4.jpg" alt=""></div>
                        <div class="item"><img src="Foto/Slide5.jpg" alt=""></div>
                    </div>
                </div>

<script type="text/javascript" src="slick-1.6.0/slick/slick.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.fade').slick({
          dots: false,
          infinite: true,
          speed: 700, 
          fade: true,
          cssEase: linear,
        });
      });
    </script>

#slider {
    margin: 100px auto 0;
    }
 
     .fade {
    width: 840px;
    height: 500px;}

     .fade .item {
    margin: 0 20px;
    height: 100%;
    width: 100%;}
    
     .item img {
    border: 10px solid #fff; 
    width: 100%;
    object-fit: contain;}

И вот что пишет браузер:


Спасибо.

Answer 1

[Игорь]

Вы забыли кавычки

...
cssEase: 'linear'
...

Comments

[ChrisMenschenin]

Да, но я не думал, что они так важны)

[Игорь]

важны, ведь у вас значение строковое :)

[ChrisMenschenin]

Игорь: А как этот же код подправить, чтобы слайдер был резиновым?

Answer 2

[Боб Хоуп]

Привет, сложно сказать, не видя структуру проекта, но мое первое подозрение падает на то, что скрипт неправильно подключен. Он точно доступен по адресу slick-1.6.0/slick/slick.min.js?  А что если попробовать адрес CDN: "//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"? И еще, в приложенном коде не видно, загружается ли необходимый слайдеру css.

Comments

[ChrisMenschenin]

Насчёт структуры, можете просто приписать body и ничего не изменится, т.е. это полная запись (разве что я забыл приписать сюда css слайдера, но он уже был подключён). Скрипт подключён тоже верно. Ещё я добавил скрин с "реакцией" браузера на код

[ChrisMenschenin]

Это кавычки всё

[ChrisMenschenin]

А не могли бы вы по этому же коду сказать, как сделать слайдер "резиновым"? Я просмотрел много чего, но так и не понял, коды у всех сайтов очень запутанные, половина информации не высвечивается.

Answer 3

[sergey]

ошибка: cssEase: linear,
необходимо: cssEase: 'linear',
и стили не подключены, я немного изменил вместо изображений span, но это сути не меняет, все работает
jsfiddle

Comments

[ChrisMenschenin]

Да, дело в кавычках