Tips for incorporating text into slider images

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!

Answer №1

@nushrat Here is a solution for you:

<section id="banner">

    <div class="banner-bg">
        <div class="banner-bg-item"><div class="textoverlay"><h3>The Finest Serviced Apartment in Suburban Mumbai</h3><h3>Your Ideal 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>The Finest Serviced Apartment in Suburban Mumbai</h3><h3>Your Ideal 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>The Finest Serviced Apartment in Suburban Mumbai</h3><h3>Your Ideal 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>The Finest Serviced Apartment in Suburban Mumbai</h3><h3>Your Ideal 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;
      }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a problem where updating the selected option in a dropdown does not properly refresh the HTML

I am currently working with a dropdown menu containing countries. Initially, the selected item is set to Ukraine. <select id="country" name="country"> <option value="US">USA</option> <option value="UG">Uganda</option> ...

Leveraging package.json information within HTML using ReactJS

Currently, I am facing a situation where I need to incorporate the name attribute from the package.json file into my HTML code in order to use it as the title of the document. While I am aware that this can be achieved through the use of the react-helmet ...

How can you make the contents of a <DIV> expand?

Picture a scenario where I have a navigation bar in the header of my web page, consisting of several links. What I want is for these links to expand horizontally to fill the parent container without me having to hard-code based on the number of links. In o ...

The JavaScript code is unable to locate a specific variable in the file

Experiencing an issue with hasAttr.js where it is unable to locate the variable :jQuery. Assistance would be greatly appreciated. Just beginning my journey on the client side. ...

What causes this statement to consistently be incorrect?

I am in the process of developing a Q&A platform where users can vote on answers. I have assigned project.problem.upVoted to store a list of answers that the user has already upvoted. If an answer has already been voted on, the callback function for cl ...

Customizing the width of the JQuery $ui.progressbar by overriding its properties

After spending some time, I successfully overrode the function that controls the width of the progress bar element in the jQuery UI widget version 1.12.1 from September 14, 2016. Initially, I needed the progress bar to completely fill a column in a table. ...

The presence of concealed cells within an HTML table is leading to an increase in the

I am currently working on an HTML Table that serves as a summary table for displaying a list of items. The table has 4 visible columns out of approximately 20, with the remaining columns set to display: none;. However, the hidden cells are causing the rows ...

AngularJS featuring a dropdown selector

When I choose an option from the dropdown menu, I want to display the corresponding table from the SQL database. Below is the code for this functionality: If you select an option from the dropdown and press the button, the table associated with that option ...

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

Unseen related model fields

I am struggling to figure out what is causing an issue in my code. Can anyone explain why the fields in locations = Location.objects.filter(user=add_profile.user) are not showing up on my html page? models.py class Location(models.Model): user = mode ...

What could be causing my content to unexpectedly break out of its designated div structure?

My website on Wordpress is causing me trouble. When I input text directly into the HTML/CSS structure hardcoded style, it fits perfectly. However, when I attempt to do the same thing using Wordpress <?php echo the_content();?>, it ends up breaking ou ...

Deciphering a JSON response obtained from a jQuery output within a PHP context

I have created a simple search form that uses jQuery to query an external server for results. $("#formsearch").on("submit", function (event) { // all good! event.preventDefault(); submitFormSearch(); }); function submitFormSearch() ...

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...

arranging <li> elements in alphabetical order

I'm looking for a way to alphabetically sort an unordered list while still keeping the outer html intact. My current method sorts the list alphabetically, but it only reorganizes the inner html of the list elements and not the entire element itself. T ...

Utilizing the JQuery .not() method to fade out all div elements except for the one that is selected and its corresponding children

I have a grid consisting of images, each with a hover function that changes the opacity of a div. The image is set as a background image, while the information is placed within a div in each grid-item. <div class="grid"> <div class="grid-it ...

Update the JavaScript to modify the styling based on the specific value of the

Is there a way to apply specific style properties to images only if they already have another property? I've managed to achieve this with the following code snippet: if ($('#content p img').css('float') == 'right') $ ...

On-page refresh triggering HTTP 404 error in Vue3 routing situation

Issue Upon reloading a route, such as /installer, in Vue3.js, I encounter the following error: https://i.sstatic.net/UKxdk.png Code Snippet I am utilizing the Router with the setup below: const router = createRouter({ history: createWebHistory(proces ...

Creating a Dropdown Filter using Vanilla JavaScript

I am currently working on a project for one of my college courses, which involves creating a dropdown list filter using pure JavaScript to filter a grid of images in HTML/CSS. The main challenge I am facing is that this filter needs to be able to work with ...

Capturing and saving location data without internet connection, and then displaying markers once connectivity is restored

I am currently developing a web application that will monitor the user's location. I want to ensure its reliability, so even if the user loses internet connection, the application will continue tracking their location (since GPS does not rely on inter ...

"Exploring the World Wide Web with JavaScript and Ajax in Internet

Is there a way to include a Javascript snippet at the end of some ajax content? It seems to be functioning properly in Firefox, but when I try it in Internet Explorer, the script is printed out without being executed. <script type="text/javascript"&g ...