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
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>
Step 2:
Add a stylesheet from the bottom menu in your project
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>
Step 3:
Add a javascript file & name it slider_main.
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>
If you now save your progress and go to preview you will see something like this
With that, you have successfully inserted the slider in your project. You can customize the code as you want.
