How to add a slider to White Label

Add an image slider to the top of your Travelpayouts White Label to make it more visually appealing and informative. You can use sliders to display banners with information about advertisers and other useful things.

Preparing for the addition of an extension

At first, add the jquery library connection code to make everything work correctly. Open the White Label settings and go to the Sections tab. 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 White Label extensions, 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>

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