Сверстаем секцию отзывов с плагином owlcarousel

Секцию отзывов клиентов сделаем около footer.

Подключим плагин owlCarosel, подробно было как подключить плагин owlcarousel в этой статье.

Создадим новую секцию с классом s-review.

В секции будет контейнер container с классом row.

Сделаем заголовок отзывы клиентов в теге h2 на всю ширину bootstrap сетки col-sm-12.

Дополнительный класс у заголовка будет text-center, этот класс установим по центру.

Для центрирования или позиционирования любых элементов нужно добавлять такой класс.

Под заголовком будет карусель owl-carousel.

Сделаем разметку классом col-sm-8, карусель будет занимать восемь колонок.

Чтобы сделать owl-carousel по центру добавим дополнительный bootstrap класс col-sm-offset-2, который сдвинет на две колонки слева нашу карусель, с правой стороны получится две пустые колонки.

Наши отзывы будут заключены в кавычки классом kov.

Чтобы подключить карусель пишем класс owl-carosel с названием reviews.

Добавим элементы review в карусель.

1. review-header пишем имя человека, который оставил отзыв.
2. review-data время, когда был отзыв и вид услуги в скобках.
3. reviews-text текст отзыва.

Продублируем все review столько раз, сколько было отзывов, например, три раза.

Получится код в index.html.

Скрипт для отображения owlCarosel.

Откроем файл common.js и добавим строку кода.

Возьмем наш класс $(.reviews) и применим owlCarousel ().

Посмотрим в браузере как получилось.

Карусель появилась, но мы добавим еще параметры.

1. Зациклим карусель loop: true.
2. items: 1 отобразим один отзыв на странице.
3. smartSpeed: 700 скорость среднюю перелистывания.
4. nav: false уберем элементы навигации, будем использовать класс навигации точки owl-dots.

Получился скрипт в common.js.

Перейдем к стилизации отзывов.

Откроем main.sass и с класса reviews начнем стилизацию. text-align: center сделаем элементы по центру.

Это же свойство добавим классу text-center.

Перейдем к кавычкам kov позиция будет position: absolute.

Чтобы было две кавычки в начале и в конце текста воспользуемся псевдоклассом &::before, &::after.

Укажем в обязательном свойстве две запятые content: ,, у них будет position: absolute.

Замер кавычек сделаем, побольше и цвет назначим синий.

Шрифт будет font-family: 'Time New Roman', serif.

Сбросим line-height на ноль, потому что этот элемент может иметь свойство установленное для body и будет некорректное отображение при вращение через rotate.

Перевернем к верх ногами кавычки transform: rotate (180deg).

Сделаем элементы блочными display: block.

Зададим отдельно каждому элементу свойства.

Начнем с &::before зададим отступ сверху и слева, у &::after будет отступ справа и уберем transform: rotate (0).

Стилизуем точки owl-carousel.

У всех точек owl-dots сделаем ширину width: 100% и сделаем по центру.

У каждой точки owl-dot зададим ширину и высоту по 10 пикселей.

Для круглой точки зададим радиус border-radius: 10em.

Будет display: inline-block и отступы между точками.

Укажем активному элементу &.active, что он будет серого цвета background-color: #555 и увеличим размер transform: scale (1.5).

Чтобы переключение сделать плавным анимацию изображение у класса точки transition: background-color .5s ease, transform .5s ease.

Стилизуем каждый review отзыв.

Небольшой отступ сверху margin-top: 20px.

• &-header шрифт будет курсив font-style: italic, размер 30 пикселей и текст жирным.
• &-data копируем с верхнего класса. font-family: 'Time New Roman', serif шрифт.
• &-text добавим размер font-weight: 800

Проверим как получилось в итоге в браузере.