How to make White Label more attractive and informative by adding a slider with images.             

To make your White Label from Travelpayouts more visually appealing and informative - add an image slider to the top of it. In the slider, you can display banners with information about travel brands and other useful things. Users will be able to scroll through the tabs of the slider and find additional valuable information.

Preparing for the addition of an extension

First, add the jquery library connection code to make everything work correctly.

1. Open the White Label settings and go to the Sections tab.

2. At the bottom of the code block Site footer, place the following code:

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

Please note! The jquery library connection code is only added once. If you add other tools to your White Label (for example a pop-up or information block), you do not need to re-insert the code.

Adding a slider

To add a slider, place the following code in the Site header block:

<div class="slider__block header__slider">
 <div class="slide slide_1">
 <div class="text__wrap_slider1">
 <span class="title">Get <br/> travel insurance <br/> without leaving home</span>
 <a href="#" title="" class="btn__slider_one">Choose a policy</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">Tiring vacation planning? <br/> Package tour - the best solution!</span>
 <a href="#" title="" class="btn__slider_two">View tours</a>
 </div></div>
</div>

Note! The code contains examples of sliders that can be added to the White Label. Please replace them with your own information.

Each <div class=«slide slide_1»>…</div> tag is a separate slider and you can add any number of them. The content of the slider should be put inside this tag: text, image, link.

• To add text to the slider, use the span tag with the title class. For example:

<span class="title">Get <br/> travel insurance <br/> without leaving home</span>

• To add an image to the slider, use the span tag with the img class and the img tag with a link to the image. For example:

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

Customizing the visual appearance

Styles for the slider are added in the code block Site footer. The example below shows the code for two sliders. You can change it as you wish, use it for additional sliders or create your own code based on this example. If you lack knowledge of HTML, CSS and JS, find a freelance developer who can help you.

  /* 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;
        }
    }

Add the style call on the Metadata tab to each page type:

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

You can change the style and number of tabs as you like. If you lack knowledge of HTML, CSS and JS, find a freelance developer who can help you.

Displaying the slider

To display the slider, add the following code to the Site footer block:

<script>$('.header__slider').slick();</script>

An example of a slider can be found here: http://kit.travel

You can change the style of slider as you like. If you lack knowledge of HTML, CSS and JS, find a freelance developer who can help you.

Here is a file with a set of styles from kit.travel: style.css.