Anton Fyodorov

Эмм.
Похоже вы неправильно понимаете механизм событий.

items[i].addEventListener('click', function() {alert(i);});

Данной строчкой вы подписываетесь на событие клика. Функция не исполняется сразу, а ждет когда произойдет клик.
Это как если бы вы оформили подписку на какой-нибудь журнал. После подписки вы бы не стали ждать его по стойке смирно что бы прочитать, а жили бы своей жизнью. А когда он бы пришел, получили бы него на почте и прочитали.

learn.javascript.ru/task/make-army

Потому что глобальная переменная i на момент события содержит 3.
Используйте замыкание jsfiddle.net/7krzu4p3/1

var width = document.getElementById('foo').offsetWidth;

Привет, что бы при уменьшении экрана было как на втором скрине используй медиа запросы, уменьши шрифт, сделай позишн абсолют и left or right изменяй позицию, и так для каждого расширения экрана. но на мобах думаю это лучше будет display: none;

Flex-basis задает начальный размер элемента относительно главной оси флекс-контейнера. В зависимости от направления оси может быть похожим и на width, и на height. Скорее даже на min-width и min-height. Меньше чем flex-basis элемент не будет, но может быть больше, в зависимости от размеров контейнера, окна...

Flex-basis дает гораздо больше возможностей для красивой адаптации макета на мобильные разрешения, например когда контейнер перестает быть row и становится column, или наоборот.

P.S. Как меня справедливо поправили ниже, flex-basis ведет себя не так как min-width/height в том случае, когда не помещается в контейнер, не "вылазит".

Dots в примерах с их сайта реализованы с помошью текстового символа, который описывается в селекторе .slick-dots li button:before

.slick-dots li button:before {
 font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•'; /* <-- Вот этот символ */
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Соответственно чтобы изменить обводку нужно либо играться с -webkit-text-stroke и реализовывать фоллбэк с помощью text-shadow (плохой вариант), либо заменить этот символ на SVG изображение и задавать цвета уже в SVG (хороший вариант).

Вариант с text-stroke: https://jsfiddle.net/mxssjfou/2/
Вариант с SVG: https://jsfiddle.net/mxssjfou/3/

PS задавать свою тему dots, отличную от той, что берется в примере нужно с помощью свойства dotsClass: 'my-dots-class' в настройках инициализации, но если нужно только слегка изменить - лучше скопировать CSS из темы и править где надо.

Ctrl+C попробуйте

CSS и JS:
К примеру, у вас имеется большое количество (Х штук) css или js файлов, которое вы подключаете на своих страницах посредством тэгов <link> и <src>.
При загрузке страницы, браузер клиента будет отправлять X запросов к вашему серверу, а ваш сервер должен будет ответить на X запросов.
Это:

1. Тормозит загрузку страницы - будете ждать ответа от сервера
   
2. Загружает ваш сервер
   

С помощью сборщиков фронтэнда вы можете "склеить" все файлы в один - main.css и main.js, которые будут отдаваться 2 запросами с сервера. Также, вы сможете минифицировать CSS и JS. Под минификацией подразумевается уменьшение размеров файла на диске. Естественно, более легкий файлы будет быстрее прогружаться + минимальное количество запросов к серверу.

IMG:
К примеру, у вас имеется Х изображений размером 700 Кбайт. Клиенту надо будет загрузить 700 * X Кбайт. Если вы пропустите свои изображения через Gulp, то вы получите изображения с меньшим размером на диске и такого же качества, т.е. клиенту придется прогрузить примерно (500-600) * X Кбайт.