<div class="slider" id="slider" style="">
    <div class="slItems">
        <div class="slItem" style="background-image: url('<?php echo base_url('assets/frontend/img/banner.jpg') ?>');">
        </div>
        <div class="slItem" style="background-image: url(<?php echo base_url('assets/frontend/img/banner3.jpg') ?>);">
        </div>
        <div class="slItem" style="background-image: url(<?php echo base_url('assets/frontend/img/banner4.jpg') ?>);">
        </div>
    </div>
</div>

.slider {
height: 500px;
position: relative;
}
.slItems {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
.slItem {
width: 100%;
height: 500px;
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;
}
.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;
}