Вёрстка адаптивной карусели отзывов
на базе же подключенного плагина owl.carousel
Смотрим и видим:
Темная секция - стало быть сразу вывортка и наш class ".dark"
У нас есть тут Оверлей
У нас тут будет Карусель!
Наша уже подключенная: owl.carousel
GO в index.html
Далее ставим картинку фон женщину:
Текста тестового пока не видно - возможно нужно
добавлять z-index - но это уже позже.
Теперь делаем заголовок:
Уже увидим наш стильный ЗАГОЛОВОК:
Далее опишем собственно класс центрирования:
GO в main.sass
Далее делаем Карусель отзывов:
Точки - ЭТО ПАГИНАЦИЯ у нас будет для карусели:
И сразу у нас виден текст:
Создаем item (Айтемы)
Вообще из каких блоков состоит наша Карусель:
Это мы описали 1-й item
Далее дублируем 2-й item
Теперь ИНИЦИАЛИЗИРУЕМ нашу карусель:
GO в common.js
И наконец то увидим нашу карусель:
Мы всегда выводим по 1-му item (а сейчас их 3)
Добавим параметры: Зацикливание
Далее стилизуем:
GO в main.sass
Смотрим радуемся)
Далее, стилизуем пагинацию
Теперь добавим анимации для плавной подсветки точек:
Нужно подровнять ковычки - после того как мы проставили отступы для всех элементов карусели
ТЕПЕРЬ МЕДИА-АДАПТАЦИЯ!
Попробуем исправить и это:
Обратися к документации: owl.crousel.js
В прошлый раз этот сайт не нашел.
GO в common.js
ТИПА ВСЕ С ЭТОЙ СЕКЦИЕЙ
Особо ничего не поменялось!
И Мадама - прыгнула на место! (Маленькая и красивая)
Это карусель с ЛОГО Партнеров:
Что тут имеем:
- ЗАГОЛОВОК
- КАРУСЕЛЬ С ЛОГОТИПАМИ
- ОВЕРЛЕЙ СВЕТЛЫЙ (кастомизируем его)
Создадим новую секцию:
GO - в main.sass
Смотрим:
GO в index
И у нас появился ЗАГОЛОВОК:
Сделаем отступ ( Offset ) - на 1-ну колонку Bootstrup, а
ширина самой карусели ЛОГО-Партнеров, соответственно будет 10 колонок (по середине).
GO в common.js
Включим зацикленность,
Отключим точки,
Включим навигацию
Поработаем над фотоном,
идем в main.sass - где у нас групповая стилизация <Section>
Видим белый оверлей:
И далее стилизуем эту секцию:
Перейдем теперь в конец main.sass - и продолжим стилизовать.
имеем различия по классам:
и пишем:
и Лого у нас встали уже по лучше:
( Ошибку там исправил -> mix-width на max-width )
Смотрим карусель:
ЗДЕСЬ КАКОЙ ТО НЕИСПРАВИМЫЙ КОСЯК!
ПРОПАДАЕТ НАВИГАЦИЯ!
Но хрен с ним, надо двигаться дальше:
Теперь оформим навигацию:
Далее АДАПТИВНОСТЬ:
И еще не много подправим на открытом экране отступы от ЗАГОЛОВКА:
С этой секцией ПОКА ВСЕ!
(Имеем косяк - нет навигации на открытом экране)
