Question

我正在尝试在每个图像的滑块上添加文本。我的图像滑块工作正常，但我需要带有图像的文本幻灯片。但我不知道该怎么做。

这是我的HTML代码

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

这里是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();
      }
    });

请帮我找到解决方案

Answer 1

@nushrat 用这个..

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

如何在滑块图像上添加文本

1 个答案: