Image Slider in Unbounce

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

Please follow and like us:

(1) comment

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!

Add Your Reply

Image Slider in Unbounce

Leave a Comment:

(1) comment

Leave a Comment:

Leave a Comment:

Enjoy this blog? Please spread the word :)