CODEWITHSUNDEEP
jqueryhtmlcss
nushrat
nushrat

Reputation: 87

how to add text on slider images

I am trying to add text on slider with each images..my image slider is working perfectly but i need text slide with images.but i don't know how to do this .

Here is my html code

<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>

here is jquery

 $('#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();
      }
    });

Please help me t find the solution

Upvotes: 0

Views: 78

Answers (1)

user5907059
user5907059

Reputation:

@nushrat Use this..

<section id="banner">

    <div class="banner-bg">
        <div class="banner-bg-item"><div class="textoverlay"><h3>Suburban Mumbai’s Best Serviced Apartment</h3><h3>The Perfect Home Away From Home</h3>
          </div>
          <img  src="<?php echo base_url('assets/img/slider-1.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3>Suburban Mumbai’s Best Serviced Apartment</h3><h3>The Perfect Home Away From Home</h3>
          </div>
          <img  src="<?php echo base_url('assets/img/slider-2.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3>Suburban Mumbai’s Best Serviced Apartment</h3><h3>The Perfect Home Away From Home</h3>
          </div>
          <img  src="<?php echo base_url('assets/img/slider-3.jpg'); ?>"  alt="">
      </div>
      <div class="banner-bg-item"><div class="textoverlay"><h3>Suburban Mumbai’s Best Serviced Apartment</h3><h3>The Perfect Home Away From Home</h3>
          </div>
          <img  src="<?php echo base_url('assets/img/slider-4.jpg'); ?>"  alt="">
      </div>
    </div>

css

.banner-bg .banner-bg-item .textoverlay{
          padding-top: 30%;
          padding-left: 12%;
          color: white;
      }

Upvotes: 1

Related Questions