Инструкция, как сделать White Label более красивым и информативным, добавив слайдер с изображениями.

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

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

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

1. Откройте настройки White Label в личном кабинете Travelpayouts;

2. Перейдите на вкладку Мои блоки;

3. Добавьте в блок для ввода кода Футер сайта следующий код:

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

Обратите внимание! Код подключения библиотеки jquery добавляется только один раз. Когда вы будете добавлять другие дополнения на 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>

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

Вы можете добавить стили для слайдера одним из следующих способов:

• вставить код, указанный ниже, в блок Футер сайта на вкладке Мои блоки; 
• вставить код на вкладке Стили в разделе Настроить стили в CSS.
  Второй вариант удобен тем, что вы сможете хранить все стили в одном месте, а вкладка Мои блоки не будет перегружен акодом.
  

В примере ниже приводится код для двух слайдеров, вы можете изменять его по своему усмотрению, использовать для дополнительных слайдеров или создать на основе этого примера свой код. Если вам не хватает знаний 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" />

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

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

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

<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>

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