1. Travelpayouts Knowledge Base
  2. White Label
  3. Extensions for White Label by Travelpayouts

How to add a slider to White Label

Add an image slider to the top of your 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.

mceclip0.png

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 Footer section.

Add the following code in the code input box:

<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 added only once. If you add other White Label extensions, you do not need to re-insert the code.

mceclip0.png

Adding a slider

To add a slider, open the Header tab in the White Label settings and add the following code:

<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, 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 Color Scheme section of the White Label settings. 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 Meta 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" />

mceclip0.png

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 White Label Footer:

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

File with a set of styles from kit.travel: style.css.

Was this article helpful?

Have more questions? Submit a request

Related articles