スライダイメージにテキストを追加する方法

Question

各イメージのスライダにテキストを追加しようとしています。イメージスライダは完全に動作していますが、images.butでテキストスライドが必要です。これを行う方法はわかりません。ここで

はここに私の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(); 
     } 
    }); 

であるtが 使用この@nushratソリューションに

Answer 1

を見つける助けてください..

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