How to make White Label more attractive and informative by adding a slider with images.
This setting is only available for White Labels with the "Page" type. If you’re using “Widget” type, you can’t apply this setting.
Learn more about the difference between White Label Web types here.
To make your White Label from Travelpayouts more visually appealing and informative, add an image slider at the top. 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. For example:
Adding a jQuery library
First, add the jQuery library connection code to make everything work correctly.
1. Open White Label Web settings in your Travelpayouts account.
2. Open the Custom HTML code tab.
3. Add the following code in the <footer> tag:
<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 the slider
1. Insert the following code in the <head> tag:
<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.
2. 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>
3. 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 of a slider
1. Add the following code to the <style> of the Custom HTML code field.
Note! 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. Don't forget to use tag <style>.
/* slider */
.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;
}
.slick-dotted.slick-slider {
margin-bottom: 0px;
}
.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;
}
}
2. Add the style call to the <head> tag:
<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 <footer> tag:
<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>