We will learn how to add a slider in Unbounce in 4 simple steps. Just follow my instructions to add the slider in your project easily.
I have created the slider already and you will find the codes below. Now follow the steps to easily use the slider in your Unbounce project.
Step 1:
Insert HTML element in your project & place it according to your need
![](https://highconversionguru.com/wp-content/uploads/2023/11/Screenshot_21-1024x484.png)
Paste the following code into your HTML element and click “Save Code”
<div class="ub-slider" id="ub-slider">
<div class="ub-slider-wrapper">
<!-- Slider Item 1 -->
<div class="ub-slider-item"
style="background-blend-mode: multiply; background: rgba(0,0,0,0.6) url('https://image-service.unbounce.com/https%3A%2F%2Fapp.unbouncepreview.com%2Fpublish%2Fassets%2Ff49a84a4-5e54-4ff0-a589-0e7129a221c5%2F09384c88-fb-r-w_11hc0u000000000000001o.jpg?w=1920&h=1080&q=60'); background-position:center; background-repeat: no-repeat;background-size: cover;">
<!-- Slider Content Goes Here -->
<div class="content">
</div>
</div>
<!-- Slider Item 2 -->
<div class="ub-slider-item"
style="background-blend-mode: multiply; background: rgba(0,0,0,0.6) url('https://auto.honda.fr/content/dam/central/cars/e-ny1-electric-suv/overview-phase-3/hero-tile/01_RET_2023_03_HONDA_Shot_1_0214_1805.jpg/jcr:content/renditions/fb_r_w.webp'); background-position:center; background-repeat: no-repeat;background-size: cover;">
<!-- Slider Content Goes Here -->
<div class="content">
</div>
</div>
<!-- Slider Item 3 -->
<div class="ub-slider-item"
style="background-blend-mode: multiply; background: rgba(0,0,0,0.6) url('https://auto.honda.fr/content/dam/central/cars/e-ny1-electric-suv/overview-phase-3/four-spec/24YM_ENY1_Front_Straight_Dynamic_Country_KG_RGB.jpg/jcr:content/renditions/fb_r_w.webp'); background-position:center; background-repeat: no-repeat;background-size: cover;">
<!-- Slider Content Goes Here -->
<div class="content">
</div>
</div>
</div>
</div>
![](https://highconversionguru.com/wp-content/uploads/2023/11/Screenshot_24-1-1024x478.png)
Step 2:
Add a stylesheet from the bottom menu in your project
![](https://highconversionguru.com/wp-content/uploads/2023/11/Screenshot_21-2-1024x486.png)
Paste the Following CSS and click “Done”
<style>
.ub-custom-slider {
display: block !important;
left: 0px !important;
top: 60px !important;
z-index: 1 !important;
width: 1000px !important;
height: 700px !important;
width: 100vw !important;
/*position: relative !important; */
margin-left: -50vw;
left: 49.1% !important;
}
.ub-slider {
width: 100%;
height: 100vh;
position: relative;
}
.ub-slider-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.ub-slider-item {
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;
}
.ub-slider [class*="ctrl"] {
position: absolute;
top: 50%;
color: #fff;
font-size: 85px;
-weight: bold;
margin-top: -42.5px;
cursor: pointer;
}
.ctrlNext {
right: 50px;
}
.ctrlPrev {
left: 50px;
}
.ub-slider-item.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;
}
.ub-slider-item.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);
}
.ub-slider-item.nextItem.next,
.ub-slider-item.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);
}
.ub-slider-item.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);
}
.ub-slider-item.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);
}
.ub-slider-item.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);
}
.ub-slider-dots {
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);
}
.ub-slider-dot-single {
width: 13px;
height: 13px;
float: left;
border: 2px solid #FFFFFF;
border-radius: 50%;
margin-left: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
.ub-slider-dot-single.active {
background: #FFFFFF;
}
.ub-slider-dot-single:hover {
background: #D0D0D0;
border-color: #D0D0D0;
}
@media(max-width: 768px) {
.custom-slider {
height: 990px !important;
}
.ub-slider-dots {
bottom: 16px;
}
.ctrlNext,
.ctrlPrev {
display: none;
}
}
</style>
![](https://highconversionguru.com/wp-content/uploads/2023/11/Screenshot_25-1024x478.png)
Step 3:
Add a javascript file & name it slider_main.
![](https://highconversionguru.com/wp-content/uploads/2023/11/Screenshot_22-1024x483.png)
Paste the following code and click “Done”
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script> $(function () {
$('#ub-slider').rbtSlider({
height: '1000px',
'dots': false,
'arrows': false,
'auto': 3
});
});
</script>
![](https://highconversionguru.com/wp-content/uploads/2023/11/Screenshot_27-1024x478.png)
If you now save your progress and go to preview you will see something like this
![](https://highconversionguru.com/wp-content/uploads/2023/11/Screenshot_28-1024x477.png)
With that, you have successfully inserted the slider in your project. You can customize the code as you want.