null

King Composer — применяем красивые иконки навигации для Tabs Slider

Данная запись посвящена пользователям использующим плагин King Composer.

В случае использования компонента Tabs Slider, и при включении навигации по умолчанию отображаются невзрачные кнопки “NEXT” и “PREVIEW”, уверен большинству пользователей как и мне будет куда приятнее использовать навигационные стрелки место кнопок отображающихся по умолчанию.

В данной записи я предоставляю стили которые заставляют появится навигационные стрелки.

Очень важно! Элемент ROW в котором будет находится наш Tabs Slider должен иметь ID owl-tabs

В итоге получим:

King Composer - применяем красивые иконки навигации для Tabs Slider

CSS стили:

/*Nav Tabs Slider*/
#owl-tabs .owl-prev {
    position: absolute !Important;
    bottom: 50%!Important;
    width: 40px!Important;
    height: 50px!Important;
    margin-top: -25px!Important;
    /* background: red !Important; */
    left: 10px!Important;
    color: transparent!Important;
    transition: all .3s ease!Important;
    color: #ff000000 !important;
        background: #27272700 !Important;
    padding: 0!Important;
    z-index: 71!Important;
    content: "e605";
}

#owl-tabs .owl-prev:before {
    content: "\e605"!Important;

    transition: all .6s ease!Important;
    font-family: simple-line-icons!Important;
    background: #27272700 !Important;
    font-size: 50px!Important;
    line-height: 50px!Important;
    font-weight: 100!Important;
}

/*Color*/
#owl-tabs .owl-prev:before,
#owl-tabs .owl-next:before {
    color: #00296529 !Important;
}

/*Color hover*/
#owl-tabs .owl-prev:hover:before,
#owl-tabs .owl-next:hover:before {
    color: #002965 !Important;
}


#owl-tabs .owl-next {
    position: absolute !Important;
    bottom: 50%!Important;
    width: 40px!Important;
    height: 50px!Important;
    margin-top: -25px!Important;
    /* background: red !Important; */
    right: 10px!Important;
    background: #27272700 !Important;
    color: transparent!Important;
    transition: all .3s ease!Important;
    color: #ff000000 !important;
    padding: 0!Important;
    z-index: 71!Important;
    content: "e605";
}

#owl-tabs .owl-next:before {
    content: "\e606"!Important;
  
    transition: all .6s ease!Important;
    font-family: simple-line-icons!Important;
    font-size: 50px!Important;
    line-height: 50px!Important;
    background: #27272700 !Important;
    font-weight: 100!Important;
}

Импорт для King Composer блока с отзывами:

<h2 style="text-align: center;">Отзывы о услугах и товарах:</h2>