Как добавить слайдер в White Label

Чтобы сделать ваш White Label более красивым и информативным - добавьте в его верхнюю часть слайдер с изображениями. В слайдере можно отображать баннеры с информацией о рекламодателях и другие полезные вещи.

mceclip0.png

Подготовка к добавлению расширения

Чтобы всё работало корректно, сначала добавьте код подключения библиотеки для обработки jquery. Для этого откройте настройки White Label и перейдите в раздел Подвал.

В блок для ввода кода, добавьте следующий код:

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>

Обратите внимание! Код подключения библиотеки jquery добавляется только один раз. Если вы добавляете другие расширения для White Label, то повторно код вставлять не нужно.

mceclip0.png

Добавление слайдера

Чтобы добавить слайдер, откройте вкладку Шапка в настройках White Label и добавьте следующий код:

<div class="slider__block header__slider">
<div class="slide slide_1">
<div class="text__wrap_slider1">
<span class="title">Оформите<br/>туристическую страховку,<br/>не выходя из дома</span>
<a href="#" title="" class="btn__slider_one">Выбрать полис</a>
</div>
</div>
<div class="slide slide_2">
<div class="text__wrap_slider2">
<span class="img"><img src="http://sem-dev.co.ua/WLNEW/level-travel-logo.png" alt=""/></span>
<span class="title">Утомляет планирование отпуска?<br/>Пакетный тур - лучшее решение!</span>
<a href="#" title="" class="btn__slider_two">Посмотреть туры</a>
</div></div>
</div>

Каждый тег <div class="slide slide_1">...</div> - это отдельный слайдер, их может быть любое количество. Внутри этого тега находится содержимое слайдера: текст, изображение, ссылка.

Чтобы добавить текст на слайдер, используйте тег span с классом title, например:

<span class="title">Оформите<br/>туристическую страховку,<br/>не выходя из дома</span>

Чтобы добавить изображение в слайдер, используйте тег span с классом img и тег img со ссылкой на изображение, например::

<span class="img"><img src="http://sem-dev.co.ua/WLNEW/level-travel-logo.png" alt=""/></span>

Настройка внешнего вида

Стили для слайдера добавляются в разделе Цветовая схема настроек White Label. В примере ниже приводится код для двух слайдеров, вы можете изменять его по своему усмотрению, использовать для дополнительных слайдеров или создать на основе этого примера свой код. Если вам не хватает знаний CSS и JS — найдите разработчика на фрилансе, который сможет вам помочь.

  /* slyder */
    .slider__block {
        width: 1440px;
        height: 402px;
        background: #fff;
        overflow: hidden;
        margin: 0 auto;
    }

    /* the first slide */
    .slider__block .slide_1 {
        width: 100%;
        background: url('https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-1.jpg') no-repeat;
        height: 402px;
        background-position: center;
        position: relative;
    }

    /* the second slide */
    .slider__block .slide_2 {
        width: 100%;
        background: url('https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-2.jpg') no-repeat;
        height: 402px;
        background-position: center;
        position: relative;
    }

    .slider__block .slick-prev {
        left: 134px;
        z-index: 1;
        width: 56px;
        height: 56px;
    }

    .slider__block .slick-prev:before {
        background: url('https://cdn.travelpayouts.com/marketing/kit_travel/arrow-slide-left.png') no-repeat;
        height: 56px;
        width: 56px;
        background-position: center;
        opacity: 1;
        content: "";
        display: block;
    }

    .slider__block .slick-prev, .slider__block .slick-next {
        top: calc(50% - 29px);
    }

    .slider__block .slick-next {
        right: 134px;
        z-index: 1;
        width: 56px;
        height: 56px;
    }

    .slider__block .slick-next:before {
        background: url('https://cdn.travelpayouts.com/marketing/kit_travel/arrow-slide-right.png') no-repeat;
        height: 56px;
        width: 56px;
        background-position: center;
        opacity: 1;
        content: "";
        display: block;
    }

    .text__wrap_slider1 {
        position: absolute;
        top: 63px;
        left: 285px;
    }

    .text__wrap_slider1 .title {
        color: #fff;
        font-size: 38px;
        line-height: 45px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 900;
    }

    .text__wrap_slider1 .btn__slider_one {
        font-size: 17px;
        line-height: 23px;
        font-family: Open Sans;
        color: #fff;
        border-radius: 8px;
        border: 1px solid #fff;
        padding: 11px 0;
        text-decoration: none;
        display: block;
        width: 195px;
        text-align: center;
        margin-top: 36px;
    }

    .text__wrap_slider1 .btn__slider_one:hover {
        opacity: .8;
    }

    .text__wrap_slider2 {
        width: 100%;
        text-align: center;
        margin-top: 70px;
    }

    .text__wrap_slider2 span.img {
        width: 100%;
        text-align: center;
        display: block;
    }

    .text__wrap_slider2 span.img img {
        display: inline;
    }

    .text__wrap_slider2 span.title {
        color: #fff;
        font-size: 38px;
        line-height: 45px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 900;
        margin-bottom: 45px;
        width: 100%;
        display: block;
        margin-top: 12px;
    }

    .btn__slider_two {
        font-size: 17px;
        line-height: 23px;
        font-family: Open Sans;
        color: #262626;
        border-radius: 8px;
        border: 1px solid #FFE600;
        padding: 11px 25px;
        text-decoration: none;
        text-align: center;
        margin-top: 36px;
        background: #FFE600;
    }

    .text__wrap_slider2 .btn__slider_two:hover {
        opacity: .8;
    }

    /* styles to adapt the slider */
    @media (max-width: 1440px) {
        .slider__block {
            width: 100%;
        }
    }

    @media (max-width: 1199px) {
        .slider__block,
        .slider__block .slide_1 {
            height: 330px;
            background-size: auto 100%;
        }

        .slider__block .slide_2 {
            height: 330px;
        }

        .text__wrap_slider1 .title,
        .text__wrap_slider2 span.title {
            font-size: 32px;
            line-height: 38px;
        }

        .slider__block .slick-prev {
            left: 15px;
        }

        .slider__block .slick-next {
            right: 15px;
        }
    }

    @media (max-width: 991px) {
        .slider__block {
            margin-top: 60px;
        }

        .slider__block,
        .slider__block .slide_1 {
            height: 280px;
            background-size: auto 100%;
        }

        .slider__block .slide_1 {
            background-position-x: 70%;
        }

        .slider__block .slide_2 {
            height: 280px;
        }

        .text__wrap_slider2 {
            margin-top: 45px;
        }

        .text__wrap_slider1 {
            left: 90px;
        }

        .slider__block .slick-prev, .slider__block .slick-next {
            top: 50%;
        }
    }

    @media (max-width: 767px) {

        .slider__block .slick-prev:before, .slider__block .slick-next:before,
        .slick-next:before {
            height: 30px;
            width: 30px;
            background-size: 100% 100%;
        }

        .slider__block .slick-prev,
        .slider__block .slick-next {
            height: 30px;
            width: 30px;
        }

        .slider__block .slide_1,
        .slider__block .slide_2 {
            padding: 0 50px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .slider__block .slide_1 {
            background-position-x: 0;
            background-size: 300% 150%;
        }

        .text__wrap_slider1 .title,
        .text__wrap_slider2 span.title {
            font-size: 26px;
            line-height: 30px;
        }

        .text__wrap_slider1 {
            /*margin-top: 40px;*/
            position: static;
            text-align: center;
        }

        .text__wrap_slider2 {
            margin-top: 0;
        }

        .text__wrap_slider1 .btn__slider_one {
            margin: 20px auto 0;
        }

        .text__wrap_slider2 span.title {
            margin-bottom: 35px;
        }
    }

    @media (max-width: 576px) {
        .text__wrap_slider1 .title,
        .text__wrap_slider2 span.title {
            font-size: 21px;
            line-height: 24px;
        }

        .slider__block {
            height: 253px;
            margin-bottom: 0 !important;
        }

        .slider__block .slide_1,
        .slider__block .slide_2 {
            display: block !important;
            padding: 40px 28px 0;
        }

        .slider__block .slide_2 {
            padding-top: 20px;
        }

        .text__wrap_slider2 span.title {
            margin-bottom: 25px;
        }

        .text__wrap_slider1 .btn__slider_one,
        .btn__slider_two {
            margin: 24px auto 0;
            padding: 12px 0;
            width: 100%;
        }


        .btn__slider_two {
            margin-top: 10px;
            display: block;
        }

        .text__wrap_slider2 span.title {
            margin-bottom: 0px;
        }

        .slider__block .slick-prev,
        .slider__block .slick-next {
            display: none !important;
        }

        .text__wrap_slider1 .title br {
            display: none;
        }

        .text__wrap_slider1 .title span {
            display: block;
            text-transform: uppercase;
        }

        .text__wrap_slider1 .title, .text__wrap_slider2 span.title {
            line-height: 26px;
            font-weight: 700;
        }

        .text__wrap_slider2 span.title {
            margin-top: 3px;
        }

        .header__slider .slick-dots {
            bottom: 20px;
            display: flex;
            justify-content: center;
        }

        .header__slider .slick-dots li button {
            display: none;
        }

        .header__slider .slick-dots li {
            margin: 0 8px;
            background: #333647;
            border: 1px solid #333647;
            border-radius: 42px;
            width: 8px;
            height: 8px;
            transition: 0.4s;
        }

        .header__slider .slick-dots li.slick-active {
            background: transparent;
        }
    }

Добавьте вызов стилей на вкладке Мета в каждый типы страницы:

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />

mceclip0.png

Вы можете изменять стиль оформления и количество вкладок по своему усмотрению. Если вам не хватает знаний HTML, CSS и JS — найдите разработчика на фрилансе, который сможет вам помочь.

Отображение слайдера

Чтобы слайдер отображался, добавьте следующий код в Подвал White Label:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" type="text/css">
<script src="https://kenwheeler.github.io/slick/slick/slick.js" crossorigin="anonymous"></script>

<script>
window.onload = function() {
//slick slider
$('.header__slider').slick({
dots: true,
arrow: true
});

if ($(window).width() < 577) {
$('html body .ducklett-widget .ducklett-widget-wrapper--slider').slick({
dots: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
});
}
};
</script>

mceclip1.png

Пример слайдера можно найти здесь: http://kit.travel/

Была ли эта статья полезной?

Еще есть вопросы? Отправить запрос