Создаем на Рабочем столе новую папку (урок 8)

2.

Создаем на Рабочем столе новую папку: нажимаем правую кнопку мыши и выбираем
«Папку». Называем ее «site».

Внутри папки site создаем новый файл:
1. нажимаем правую кнопку мыши и
выбираем «Текстовый файл»
2. называем его «index.html»
3. если появится окно - нажимаем «Да»
Создаем в site папку с названием «js»

4.

В папке js создаем новый файл script.js:
1. нажимаем правую кнопку мыши
2. выбираем «Текстовый файл»
3. Называем его «script.js»

5.

Открываем ссылку https://kenwheeler.github.io/slick/#go-get-it

6.

Нажимаем на кнопку «Download Now» - скачается zip-файл

7.

Открываем zip-файл
Открываем папку slick-1.8.1
Внутри находим папку slick

8.

Перетаскиваем slick в нашу папку site

9.

Скачиваем с интернета
изображения и
сохраняем их в нашей
папке site

10.

ОФОРМЛЕНИЕ КОДА

11.

Открываем Visual Studio Code. Если он не установлен - надо скачать. Нажимаем на «File» > «Open Folder…»

12.

Откроется окно. Нажимаем на
«Рабочий стол». Находим нашу
папку site. Нажимаем на нее
один раз и далее нажимаем на
«Выбор папки»

13.

В результате сбоку отображаться файлы и папки внутри site. Нажимаем 2 раза на index.html – файл откроется.

14.

1. Копируем готовый код из материала по уроку, который доступен в Journal. ВНИМАНИЕ! Нужно
расставить правильные кавычки: вместо «‘» на «’».
2. Для запуска код нажимаем в боковой панели «Run and Debug». Выбираем браузер, в котором хотим
увидеть сайт, например, Chrome.

15.

<!DOCTYPE html>
<html>
<style>
.carousele{
margin: 10px;
}
.carousele div img{
width: 100%
}
</style>
<head>
<link rel='stylesheet' type='text/css' href='slick/slick.css'/>
<link rel='stylesheet' type='text/css' href='slick/slick-theme.css'/>
</head>
<body>
<div class='carousele'>
<div class='carousele-element'>
<img src="iron-man.jpg" alt="">
</div>
<div class='carousele-element'>
<img src="cap.jpg" alt="">
</div>
</div>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script type='text/javascript' src='https://code.jquery.com/jquery-migrate-1.2.1.min.js'></script>
<script type='text/javascript' src='slick/slick.min.js'></script>
<script type='text/javascript' src='js/script.js'></script>
</body>
</html>
Можно скопировать код и вставить в index.html

16.

В результате можно листать изображения

English Русский Rules