Image Slider in Unbounce

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

add custom html in unbounce

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

main js image slider in unbounce
<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>

EDIT: Add "mainjs" above "slider" JS to make the slider work. If you see any problem with the slider, let us know in the comment section.

That's it. You should be able to see 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

SIGN UP NOW

FOLLOW US ON:-

Leave a Comment:

(18) comments

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

Reply
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!

Reply
    Ashutosh June 3, 2019

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

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

      Reply
      sahibjot June 24, 2019

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

      Reply
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

Reply
Dmytro April 10, 2019

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

Reply
    sahibjot June 24, 2019

    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.

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

Reply
    sahibjot June 24, 2019

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

    Reply
      Thancan July 16, 2019

      I was able to get the demo to work after switching order and making mainjs first before slider. But, my image doesnt fill page. It stays contained within the 1000px middle screen. How do you get the entire image to fill the page in desktop mode?

      Reply
        sahibjot September 26, 2019

        Hi Thancan,
        You may want to see your CSS that is containing the slider within 1000px range? You can check in “Inspect Element” of the browser.

        Reply
Raphael August 22, 2019

Hi!

How can I remove the blank space on the right side near the scroll bar?

Thanks for any help.

Preview
https://imge.to/i/bGfFG

[=

Reply
    sahibjot September 26, 2019

    Hi Raphael,
    If you could check the CSS, there may be some sort of padding or margin that is doing this. If you have existing CSS in your page, you may want to double check it?

    Please let me know if you will need any other help.

    Thanks!!

    Reply
Rafael Nogueira Vieira September 12, 2019

I can’t put the carousel in the possession I want it to be on # lp-pom-block-14

Could someone help me?

Reply
    sahibjot September 26, 2019

    Hi Rafael,
    You will have to update JS and CSS based on the block ID then. Existing code should work with Custom HTML element as mentioned. But trying to update the JS and CSS may break the slider.

    Suggest you to stick to the structure and just move the HTML block up or below where you want it in the page.

    Reply
ThanCan October 9, 2019

I created this carousel as the instructions read, and it works correctly. But, I tried to add it to a Landing Page that was already designed with a lot of other elements and also other Javascript and CSS already were in the landing page. I copied over the mainJS and sliderJS (both as “head”) and then copied the CSS as is too. And it doesn’t show carousel. Any idea why this would be?

Any thoughts on this would be appreciated. Thank you.

Reply
sahibjot October 10, 2019

Hi ThanCan,
If you’re using too many javascripts then that may break your slider. It is recommended to keep any other JS or CSS low where you want to use this slider.

Unbounce is also using scripts so sometimes it doesn’t always work with multiple custom scripts.

Reply
Add Your Reply

Leave a Comment:

Previous Post Unbounce Next Post Add facebook share button in website