Your Coding Encyclopedia

Unbounce is certainly a great tool to design beautiful landing pages. It has various inbuilt features that you would need in a landing page but there are many features that you may want in your landing page and can't get it due to limitations of Unbounce.

There are many features like Image Slider, Countdown timer, Multistep form and much more that you may want but don't get it in your subscription. No worries! You can see set up an image slider with text and button in your unbounce pages.

You can see the image slider demo here -> Unbounce Image Slider With Text and Button

NOTE: You can use below HTML, CSS and JS to use the slider in your custom coded website.

Image Slider Settings

1. Create a new page in Unbounce

2. Choose a template or just select a blank template. For now select blank template.

3. In builder. pick "Custom HTML" element and drop it in the page. Then copy and paste the following code.

Change "background-image" URL with your image URL in the code. H1 is the title in the slider. <p> Tag contains description text.

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="slider" id="slider">
      <div class="slItems">
           <div class="slItem" style="background-blend-mode: multiply; background: rgba(0,0,0,0.6) url('https://app.unbouncepreview.com/publish/assets/10a0e0e1-e4f4-4809-8649-3a22c80c38fb/1000/237/1000/237/0/0/47746853-slide_0rs06l0rs06l000000.png'); background-position:0px 0px; background-repeat: no-repeat;background-size: cover;">
                <div class="main">
                      <div class="slText">                               <h1>PERSONAL INJURY EXPERT</h1>                                          <p>From the first conversation to the conclusion of a case, we help thousands of injured people to secure compensation every year.</p>                                         <p>From the first conversation to the conclusion of a case, we help thousands of injured people to secure compensation every year.</p>                                          <button type="button" class="claimbtn">start a claim</button></div></div></div>
<div class="slItem" style="background-blend-mode: multiply; background: rgba(0,0,0,0.6) url('https://app.unbouncepreview.com/publish/assets/10a0e0e1-e4f4-4809-8649-3a22c80c38fb/1000/237/1000/237/0/0/47746853-slide_0rs06l0rs06l000000.png'); background-position:0px 0px; background-repeat: no-repeat;background-size: cover;">
<div class="main">
<div class="slText">
<h1>PERSONAL INJURY EXPERT</h1>
<p>From the first conversation to the conclusion of a case, we help thousands of injured people to secure compensation every year.</p>
<p>From the first conversation to the conclusion of a case, we help thousands of injured people to secure compensation every year.</p>
<button type="button" class="claimbtn">start a claim</button>
</div>
</div>
</div>
<div class="slItem" style="background-blend-mode: multiply; background: rgba(0,0,0,0.6) url('https://app.unbouncepreview.com/publish/assets/10a0e0e1-e4f4-4809-8649-3a22c80c38fb/1000/237/1000/237/0/0/47746853-slide_0rs06l0rs06l000000.png'); background-position:0px 0px; background-repeat: no-repeat;background-size: cover;">
<div class="main">
<div class="slText">
<h1>PERSONAL INJURY EXPERT</h1>
<p>From the first conversation to the conclusion of a case, we help thousands of injured people to secure compensation every year.</p>
<p>From the first conversation to the conclusion of a case, we help thousands of injured people to secure compensation every year.</p>
<button type="button" class="claimbtn">start a claim</button>
</div>
</div>
</div>
</div>
</div>

4. Add custom JS in your page. Copy the following JS code and add in a new JS script named "slider".

Add this JS code in your Javascript section. You don't need to update the code. Change the code placement to "Head" section.

<script>jQuery.fn.rbtSlider=function(a){return this.each(function(){function f(a,c){c?nextItem=b.find(".slItem").eq(c-1):("prev"==a?b.find(".slItem.active").prev().length?nextItem=b.find(".slItem.active").prev():nextItem=b.find(".slItem").last():b.find(".slItem.active").next().length?nextItem=b.find(".slItem.active").next():nextItem=b.find(".slItem").first(),b.find(".slDots > .active").removeClass("active").parent().find(".slDotsSingle").eq(nextItem.index()).addClass("active")),nextItem.addClass(a+"Item").delay(50).queue(function(){b.find(".slItems > .active").addClass(a).delay(700).queue(function(){$(this).removeClass(a+" active").dequeue()}),$(this).addClass(a).delay(700).queue(function(){$(this).removeClass(a+" "+a+"Item").addClass("active").clearQueue()}),$(this).dequeue()})}var b=$(this);if(a.height&&b.css("height",a.height),b.find(".slItem").first().addClass("active"),a.dots){var c=b.find(".slItem").size();b.append($("<div/>",{"class":"slDots",html:$("<div/>",{"class":"slDotsSingle active"})}));for(var d=1;c>d;d++)b.find(".slDotsSingle.active").clone().removeClass("active").appendTo($(this).find(".slDots"));b.find(".slDotsSingle").on("click",function(){curIndex=$(this).parents(".slDots").find(".active").removeClass("active").index()+1,index=$(this).addClass("active").index()+1,index!=curIndex&&(index>curIndex?f("next",index):f("prev",index))})}if(a.arrows&&b.append($("<div/>",{"class":"ctrlPrev",html:"&lsaquo;"}).on("click",function(){f("prev")})).append($("<div/>",{"class":"ctrlNext",html:"&rsaquo;"}).on("click",function(){f("next")})),a.auto){var e=setInterval(function(){f("next")},1e3*a.auto);b.on("mouseover",function(){clearInterval(e)}).on("mouseleave",function(){e=setInterval(function(){f("next")},1e3*a.auto)})}})};</script>

4. Add another custom JS in your page. Copy the following JS code and add in a new JS script named "mainjs".

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script>$(function(){$('#slider').rbtSlider({height: '450px', 'dots': true,'arrows': true,'auto': 3});});</script>

4. Add following CSS in the page. You can update any properties based on your preferences. But don't update the class names. If you update, make sure to update it in HTML as well.

<style>
#lp-code-26 {
display: block;
left: 0px;
top: 133px;
z-index: 1;
width: 1000px;
height: 450px;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 49.1%;
}
 
 
.slider {
width: 100%;
height: 100vh;
position: relative;
}
 
 
.slItems {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
 
 
.slItem {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
 
 
.slText {
position: absolute;
top:48%;
left: 50%;
max-width: 100%;
width: 62%;
padding: 0 170px;
text-align: left;
transform: translate3d(-48%, -51%, 0);
-webkit-transform: translate3d(-48%, -51%, 0);
-moz-transform: translate3d(-48%, -51%, 0);
-o-transform: translate3d(-48%, -51%, 0);
-ms-transform: translate3d(-48%, -51%, 0);
 
}
 
 
.slText h1 {
color: #fff;
font-size: 39px;
max-width: 540px;
padding-bottom: 20px;
font-weight: normal;
border-bottom: #fff solid thin;
}
 
.slText p{
 
font-size: 16px;
max-width:540px;
color: #fff;
line-height:26px;
margin:15px 0px 0px 0px;
}
 
.claimbtn{
 
margin:25px 0 0 0;
padding:15px 100px;
background:#2f8fc0;
border:#2f8fc0 solid 2px;
border-bottom:#1f6f98 solid 5px;
outline:none;
color:#fff;
text-transform: uppercase;
font-size:18px;
font-weight: bold;
border-radius: 5px;
}
 
 
.slider [class*="ctrl"] {
position: absolute;
top: 50%;
color: #fff;
font-size: 85px;
font-weight: bold;
margin-top: -42.5px;
cursor: pointer;
}
 
 
.ctrlNext {
right: 50px;
}
 
 
.ctrlPrev {
left: 50px;
}
 
 
.slItem.active {
opacity: 1;
visibility: visible;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}
 
.next, .prev {
transition: transform 0.7s ease-in-out;
-webkit-transition: -webkit-transform 0.7s ease-in-out;
-moz-transition: -moz-transform 0.7s ease-in-out;
-o-transition: -o-transform 0.7s ease-in-out;
-ms-transition: -ms-transform 0.7s ease-in-out;
}
 
 
.slItem.nextItem {
opacity: 1;
visibility: visible;
transform: translate3d(100%,0, 0);
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
-o-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
}
 
.slItem.nextItem.next, .slItem.prevItem.prev {
transform: translate3d(0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}
 
.slItem.active.next {
transform: translate3d(-100%,0,0);
-webkit-transform: translate3d(-100%,0,0);
-moz-transform: translate3d(-100%,0,0);
-o-transform: translate3d(-100%,0,0);
-ms-transform: translate3d(-100%,0,0);
}
 
.slItem.prevItem {
opacity: 1;
visibility: visible;
transform: translate3d(-100%,0,0);
-webkit-transform: translate3d(-100%,0,0);
-moz-transform: translate3d(-100%,0,0);
-o-transform: translate3d(-100%,0,0);
-ms-transform: translate3d(-100%,0,0);
}
 
.slItem.active.prev {
transform: translate3d(100%,0,0);
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
-o-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
}
 
 
.slDots {
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
}
 
 
.slDotsSingle {
width: 13px;
height: 13px;
float: left;
border: 2px solid #FFFFFF;
border-radius: 50%;
margin-left: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
 
 
.slDotsSingle.active {
background: #FFFFFF;
}
 
 
.slDotsSingle:hover {
background: #D0D0D0;
border-color: #D0D0D0;
}
 
 
@media(max-width: 768px){
 
.slText h1{max-width: 100%; font-size: 28px;line-height: 38px;}
.slText p{max-width: 100%; padding: 0px 30px;}
.slText{padding: 0 20px; text-align: center; width: 100%;}
.claimbtn{padding:15px 90px;}
 
 
.slDots{bottom: 16px;}
.ctrlNext, .ctrlPrev{display: none;}
 
#lp-code-26 {
display: block;
left: 0px;
top: 225px;
z-index: 1;
width: 1000px;
height: 450px;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 47.3%;
}
 
}
</style>

That's it. You should be able to your image slider working in Unbounce

NOTE: This slider works well in Desktop. It isn't recommended to use slider in mobile so this slider isn't responsive. You can hide this section in mobile view and replace it with a static image.

Found this post helpful? Let us know your suggestions and queries. We'll try to help as soon as possible.

More tips and updates related to unbounce here.

Unbounce Rating

Sign up for your 30-Days FREE Trial on your Unbounce Account Today and get 20% discount on paid accounts from Unbounce Hacks

FOLLOW US ON:-

sahibjot February 8, 2019

That is wonderful. I was looking for the slider option in Unbounce from so many years but couldn’t find it anywhere. You have saved alot of time. Thank you.

Looking forward to next updates.:)

Stephen February 8, 2019

That is a wonderful step by step instruction and i loved the way you have explained everything. I was looking to add image slider with text and button in my unbounce pages from couple of years but never got succeeded.

But thanks to you, i have successfully got a working slider on my unbounce page.

Looking forward to more updates.

Cheers!

Ashutosh June 3, 2019

I have used above same for image slider but did not get positive result.

sahibjot June 3, 2019

Hi Ashutosh,
I will be happy to help you. Can you share your page URL in unbounce, so i could take a look. It has worked for plenty of users.

sahibjot June 24, 2019

Hi Ashutosh,
Add “mainjs” first and then add “slider” JS. Check if this solution works for you.

Dmytro April 10, 2019

Uncaught TypeError: $(…).rbtSlider is not a function
at HTMLDocument. (preview?attempt=1&page_uuid=462cbdf8-59b4-4b21-927f-e2a258b3c28a&time=1554903942&token=5f72fde1ec3499747cd96d0c97b7ace62be590a2f4b6f1896d81be1c4209802e:325)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.J (jquery.min.js:2)

___________________
don’t know why, but it not works

The order of adding the JS script should be reversed. “mainjs” is the first one. Thanks for code.

Hey Dmytro,
That has worked on plenty of sites but since the unbounce has reduced dependency on JS, it may require some changes that i will look into.

By keeping the mainjs at the top, did the slider work for you? If yes, then please revert so i could tweak the post for other users.

Hannah April 10, 2019

I followed the step by step instructions but all that came up was blank space on the page? Even when I didn’t change any of the original image URLs and kept everything as you have had above, it didn’t work.

Hi Hannah,
As you can see in the demo, the slider is still working. So it should be good. I would like you to keep the “mainjs” first and add “slider” js after that so see if it works.

I will be happy to assist you with any other questions.

Thanks!!

Image Slider in Unbounce

Leave a Comment:

(10) comments

Leave a Comment:

Leave a Comment:

Leave a Comment:

Leave a Comment:

Leave a Comment:

Leave a Comment:

Leave a Comment:

Leave a Comment:

Leave a Comment:

Leave a Comment:

Leave a Comment: