A lightweight JavaScript Image Carousel
HTML
<div id="usp_mb_slider">
<div id="mb_usp1" style="padding-top:10px;">
<img src="img/uni-icon.png" alt="N1 University" height="20" width="20" class="mb_usp_img" >
<span style="vertical-align: middle;">N1 Modern University in London</span>
</div>
<div id="mb_usp2" style="padding-top:10px;">
<img src="img/sstudent-experience-icon.png" alt="High Quality Courses" height="20" width="20" class="mb_usp_img" >
<span style="vertical-align: middle;">Career-focussed student experience</span>
</div>
<div id="mb_usp3" style="padding-top:10px;">
<img src="img/employability-icon.png" alt="High employability" height="20" width="20" class="mb_usp_img" >
<span style="vertical-align: middle;">96% employment after graduation</span>
</div>
<div id="mb_usp4" style="padding-top:10px;">
<img src="img/top-ten-icon.png" alt="Top 10 Universities" height="20" width="20" class="mb_usp_img" >
<span style="vertical-align: middle;">Top 10 in the Good University Guide.</span>
</div>
</div>
CSS
#usp_mb_slider {
width: 100%;
height: 40px;
background-color: #f7f5f6;
margin-top: 58px;
border-bottom: 1px solid #3079ed;
}
#mb_usp1,#mb_usp2,#mb_usp3,#mb_usp4 {
text-align: center;
padding-top: 1.5%;
padding-bottom: 1.5%;
}
#mb_usp2,#mb_usp3,#mb_usp4 {
display: none;
}
.mb_usp_img {
vertical-align: middle;
}
JavaScript
(function($) {
$(window)
.load(function() {
var $usp = $('div[id^=mb_usp]'),
i = 0,
len = $usp.length; //check if usp exist using .length method
$usp.slice(1)
.hide();
setInterval(function() {
$usp.eq(i)
.fadeOut(function() {
i = (i + 1) % len
$usp.eq(i)
.fadeIn();
})
}, 2500) //Defined the speed of rotation
});
//Footer Toggle Functionalit
})(jQuery);