website with custom carousel

Веб-сайт с Custom-Carousel

Первый сайт, который я когда -либо строил (моя третья и последняя карьера смены). Я начал с шаблонов HTML и CSS, которые я закончил тем, что переводил 90% из них.

Домашняя страница проста (мне потребовалось некоторое время для моей первой сборки; обеспечение правильного стиля, позиции и функции занимает много времени; отличный опыт обучения). Поле поиска не полностью функционирует. На данный момент это больше похоже на выпадающий.

На странице с подробностями есть динамическая карусель, которую я построил. Количество карт в карусели может быть изменено путем обновления TeamData. Ширина его изменится с размером окна, а стрелки левого/правого появления появятся, когда карусель может скользить в соответствующем направлении.

Как добраться до веб -страницы с пользовательской каруселем:

1. Перейдите прямо в detial.html или из index.html ...
2. введите «UX D» в поле поиска
3. Нажмите «UX Designer» в раскрывающемся списке
4. Моя индивидуальная карусель находится прямо под заголовком

Следующие шаги:

• Отдельная секция карусели от main.js и создать carousel.js. (сделанный)
• Полная начальная карта карьеры (сделано)
• Избавьтесь от повторяющихся названий в списке поиска (сделано)
• Добавить "x" в поле поиска (сделано)
• Ограничение результата списка поиска в нижней части окна и добавьте полосу прокрутки (сделано)
• Уточнить карту карьеры, поэтому ячечка левой стороны (сделано; реструктурирован для использования 3 столбца вместо 2)
• Слово оберните названия на карте пути (минимум)
• Выясните, как работает SVG, и изменить свой цвет, кроме черного (сделано)
• Refract HTML, поэтому все теги "li" были управляемыми JS вместо жесткого кода (сделано)
• Список данных в отдельном файле; Список поиска источника из источника SMAE вместо создания другого списка (выполнен)
• повторно посетите код поиска и CSS, чтобы он мог быть скорее компонентом (на 70%)
• преобразовать все для реагирования.

Спасибо за посещение.

Технология:

Plain JavaScript, HTML, CSS