Вёрстка адаптивной карусели отзывов

на базе же подключенного плагина     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 )

 

Смотрим карусель:

 

 

ЗДЕСЬ КАКОЙ ТО НЕИСПРАВИМЫЙ КОСЯК!

 

ПРОПАДАЕТ НАВИГАЦИЯ!

 

Но хрен с ним, надо двигаться дальше:

 

Теперь оформим навигацию:

 

 

Далее АДАПТИВНОСТЬ:

 

 

 

 

И еще не много подправим на открытом экране отступы от ЗАГОЛОВКА:

 

 

 

С этой секцией ПОКА ВСЕ!

 

    (Имеем косяк - нет навигации на открытом экране)