I need help adding text to my image slider. The slider is functioning properly, but I want text to accompany each image and I'm not sure how to achieve this.
Below is the HTML code I have:
<section id="banner">
<div class="banner-bg">
<div class="banner-bg-item"><img src="<?php echo base_url('assets/img/slider-1.jpg'); ?>" alt=""></div>
<div class="banner-bg-item"><img src="<?php echo base_url('assets/img/slider-2.jpg'); ?>" alt=""></div>
<div class="banner-bg-item"><img src="<?php echo base_url('assets/img/slider-3.jpg'); ?>" alt=""></div>
<div class="banner-bg-item"><img src="<?php echo base_url('assets/img/slider-4.jpg'); ?>" alt=""></div>
</div>
</div>
And here is the jQuery code:
$('#banner .banner-bg').each(function() {
var self = $(this),
images = self.find('.banner-bg-item');
// SET BG IMAGES
images.each(function() {
var img = $(this).find('img');
if (img.length > 0) {
$(this).css('background-image', 'url(' + img.attr('src') + ')');
img.hide();
}
});
I would appreciate any assistance in finding a solution to include text on the slider alongside the images. Thank you!