Секцию отзывов клиентов сделаем около 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 в карусель.
- review-header пишем имя человека, который оставил отзыв.
- review-data время, когда был отзыв и вид услуги в скобках.
- reviews-text текст отзыва.
Продублируем все review столько раз, сколько было отзывов, например, три раза.
Получится код в index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<section class="s-reviews"> <div class="container"> <div class="row"> <div class="col-sm-12"> <h2 class="h2 text-center">Отзывы клиентов</h2> </div> <div class="col-sm-8 col-sm-offset-2"> <div class="kov"></div> <div class="owl-carousel reviews"> <div class="review"> <div class="review-header">Дима</div> <div class="review-data">1.09.2017 г. (Ремонт ноутбука)</div> <div class="reviews-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового вскоре над, запятых единственное.</div> </div> <div class="review"> <div class="review-header">Света</div> <div class="review-data">23.07.2017 г. (Устьновка ПО)</div> <div class="reviews-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</div> </div> <div class="review"> <div class="review-header">Игорь</div> <div class="review-data">12.06.2017 г. (Ремонт компьютера)</div> <div class="reviews-text">Далеко-далеко за словесными горами в стране.</div> </div> </div> </div> </div> </div> </section> |
Содержание статьи
Скрипт для отображения owlCarosel.
Откроем файл common.js и добавим строку кода.
Возьмем наш класс $(.reviews) и применим owlCarousel ().
Посмотрим в браузере как получилось.
Карусель появилась, но мы добавим еще параметры.
- Зациклим карусель loop: true.
- items: 1 отобразим один отзыв на странице.
- smartSpeed: 700 скорость среднюю перелистывания.
- nav: false уберем элементы навигации, будем использовать класс навигации точки owl-dots.
Получился скрипт в common.js.
1 2 3 4 5 6 7 8 |
$(function() { $('.reviews').owlCarousel({ loop: true, items: 1, smartSpeed: 700, nav: false }); }); |
Перейдем к стилизации отзывов.
Откроем 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.owl-dots width: 100% text-align: center margin-top: 60px .owl-dot width: 10px height: 10px background-color: #c3c3c3 border-radius: 10em display: inline-block margin: 10px transition: background-color .5s ease, transform .5s ease &.active background-color: #555 transform: scale(1.5) .text-center text-align: center .review margin-top: 20px &-header font-family: 'Time New Roman', serif font-size: 30px font-style: italic font-weight: bold &-data font-family: 'Time New Roman', serif font-size: 20px font-style: italic &-text font-weight: 800 |
Проверим как получилось в итоге в браузере.