dynamic text overlay on a bootstrap carousel

Having limited knowledge in html and css, I am using a bootstrap carousel slider with text. I am trying to change the color of the box randomly. https://i.sstatic.net/TozUP.jpg

Here is the code that I am currently using:

<ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<div class="carousel-inner text-center" role="listbox">
  <div class="item active">
    <div class="col-lg-6 pull-right">
      <img src="#">
    </div>
    <div class="col-lg-6">
      <h2>Sed vel lectus<br>
                                <small>by Merovingi 
                                    </small></h2>
      <p>
        Sed vel lectus. Donec odio urna, 
      </p>
      <a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
        <i class="fa fa-long-arrow-right"> </i></a>
    </div>
  </div>
  <div class="item">
    <div class="col-lg-6 pull-right">
      <img src="#">
    </div>
    <div class="col-lg-6">
      <h2>Proin porta auctor nisi<br>
                                <small>by Merovingio in Jun 22, 2017 at 
                                    00:34</small></h2>
      <p>
        Proin porta auctor nisi in interdum. 
      </p>
      <a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
        <i class="fa fa-long-arrow-right"> </i></a>
    </div>
  </div>
  <div class="item">
    <div class="col-lg-6 pull-right">
      <img src="#">
    </div>
    <div class="col-lg-6">
      <h2>Aenean sodales<br>
                                <small>by Merovingio in Jun 22, 2017 at 
                                    00:33</small></h2>
      <p>
        Aenean sodales, leo eu euismod tincidunt, felis odio aliquam velit, 
      </p>
      <a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
        <i class="fa fa-long-arrow-right"> </i></a>
    </div>
  </div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

http://jsfiddle.net/ssoorajs/gbvscs64/

Would it be possible to achieve this using css alone, or would any scripting be necessary?

Answer №1

To implement this effect, you must include the following CSS styles:

.item:nth-child(1){ background:green; overflow:hidden;}
.item:nth-child(2){ background:blue; overflow:hidden;}
.item:nth-child(3){ background:yellow; overflow:hidden;}

.carousel {
  padding-bottom: 25px
}

.carousel img {
  padding-top: 20px;
}

.carousel h2 {
  color: #0072b5;
}

.carousel h2 small {
  color: #289bde
}

.carousel col-lg-4 p {
  text-align: center;
}
.item:nth-child(1){ background:green; overflow:hidden;}
.item:nth-child(2){ background:blue; overflow:hidden;}
.item:nth-child(3){ background:yellow; overflow:hidden;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class='containerbanner carousel'>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner text-center" role="listbox">
      <div class="item active">
        <div class="col-lg-6 pull-right">
          <img src="http://lorempixel.com/g/750/350/transport">
        </div>
        <div class="col-lg-6">
          <h2>Sed vel lectus<br>
                                    <small>by Merovingio in Jun 22, 2017 at 
                                        21:59</small></h2>
          <p>
            Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus... Pellentesque
            ipsum. Nulla non arcu lacinia neque faucibus... Pellentesque ipsum. Nulla non arcu lacinia neque faucibus... Pellentesque ipsum. Nulla non arcu lacinia neque faucibus...
          </p>
          <a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
            <i class="fa fa-long-arrow-right"> </i></a>
        </div>
      </div>
      <div class="item">
        <div class="col-lg-6 pull-right">
          <img src="http://lorempixel.com/g/750/350/cats">
        </div>
        <div class="col-lg-6">
          <h2>Proin porta auctor nisi<br>
                                    <small>by Merovingio in Jun 22, 2017 at 
                                        00:34</small></h2>
          <p>
            Proin porta auctor nisi in interdum. Praesent a accumsan neque. Quisque ut nulla ac libero egestas tristique. Nunc venenatis elit lorem, ut viverra neque rhoncus a. Proin erat risus, pharetra vitae elementum eget, accumsan ornare mauris. Praesent...
          </p>
          <a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
            <i class="fa fa-long-arrow-right"> </i></a>
        </div>
      </div>
      <div class="item">
        <div class="col-lg-6 pull-right">
          <img src="http://lorempixel.com/g/750/350/fashion">
        </div>
        <div class="col-lg-6">
          <h2>Aenean sodales<br>
                                    <small>by Merovingio in Jun 22, 2017 at 
                                        00:33</small></h2>
          <p>
            Aenean sodales, leo eu euismod tincidunt, felis odio aliquam velit, quis porta lorem erat eget erat. Aliquam porta libero erat, sed aliquet est sollicitudin a. Curabitur nec tellus in eros egestas venenatis ac sed nisl. In consectetur nisl eget...
          </p>
          <a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
            <i class="fa fa-long-arrow-right"> </i></a>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

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

Unit test produced an unforeseen outcome when executing the function with the setTimeout() method

When manually testing this code in the browser's console, it performs as expected. The correct number of points is displayed with a one-second delay in the console. const defer = (func, ms) => { return function() { setTimeout(() => func.ca ...

What could be the reason for Object.assign failing to update a key in my new object?

Function handleSave @bind private handleSave() { const { coin, balance } = this.state; console.log('coin', coin); console.log('balance', balance); const updatedCoin = Object.assign({ ...coin, position: balance }, coi ...

When the input is altered, retrieve all input values within the div and then proceed to update the corresponding

The HTML provided is structured as follows: <div class="filters"> <div class="filter-label">6</div> <div class="filter-inputs"> <input type="number" name="i1" id="i1" value="1" min="0" step="1" /> & ...

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

The entire space on an HTML page should be occupied with content from the header to the footer

I am currently implementing jQuery Mobile on my project. The page I have created consists of a fixed header and footer with only two buttons. Due to the fixed footer, half of the page is in silver color (data-theme=c) while the bottom half is gray. My goa ...

How can I transfer data from a MySQL callback function to a global variable?

I'm still in the learning stages of using nodejs and working on getting more comfortable with it. My goal is to retrieve a user from a database and store it in a variable, but I'm having trouble storing it globally. Though I can see that the conn ...

creating a loop to handle AJAX requests for JSON data

My JSON call successfully loads the data.root.offer[0].region data into a div with the class .region. Here is the code snippet: $.getJSON('json/data.json', function(data) { $('.region').html('<p>' + data.root.offer[0] ...

Troubleshooting issues with adding rows to an HTML table

I want to include two buttons at the top of my page: Save and Cancel. These buttons should only appear after clicking the Submit button on the Customer Information panel. However, when trying this, the Customer Information panel is pushed down while I al ...

The video player will only start playing after the source has been changed if it was already in play

I am facing an issue with my video player that has thumbnails. The problem is that the video player does not start playing the selected video unless the video is already playing. This means I have to hit the play button first, and then select the thumbnail ...

Can you explain the TypeScript type for the queryKey in React Query?

Currently utilizing react query in conjunction with typescript. What should be the type of arguments passed to the function? export const useIsTokenValid = () => { const { data: token } = useQuery<string | null>(['token'], getToken, { r ...

sidebar that appears upon the initial page load

I'm currently working on implementing a sidebar navigation panel for my website using JavaScript, HTML, and CSS. However, I am facing an issue where the sidebar automatically opens when the page is first loaded, even before clicking on the icon to ope ...

Selenium is unable to locate certain elements due to the JavaScript page not being fully loaded, causing issues with implicit and explicit wait functions

Confusion reigns as I navigate through this scenario. Working with Selenium 2 in C# and the browser being IE8, our application employs JavaScript for transitioning between panels, though these transitions actually represent different pages while technica ...

Tips for assigning a Custom Formik Component's value to the Formik value

I'm currently integrating Formik into my form alongside Google Places auto-complete feature. My goal is to display the places auto-complete functionality as a custom component within the Formik field. form.js <Formik initialValues={location:" ...

Add a Time Stamp to the Ajax URL Query

I'm attempting to add a timestamp to my URL that is being called by AJAX every 5 seconds. The purpose is to prevent caching in Internet Explorer browsers. However, it seems like the AJAX call is not functioning properly now without any error messages. ...

Activate the search function once the user has finished entering text

Currently facing the following issue: Within my JavaScript file, I have the below code snippet, termChange(evt) { this.rows = []; this.searchTerm = evt.target.value; this.getCases(); } This section of code clears out the ...

I am interested in rotating the yAxes scaleLabel in Angular using Chart.js

I have a vertical chart that I want to rotate horizontally. Unfortunately, there are no maxRotation and minRotation parameters for the yAxes, so I'm unsure of how to achieve this rotation. Although I found a similar question, I struggled to implement ...

The Date Picker pops up automatically upon opening the page but this feature is only available on IE10

There seems to be an issue with the date picker opening automatically on IE10, while it works fine in Firefox where it only appears when you click on the associated text box. Does anyone have insight into why this might be happening specifically in IE10? ...

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

Loading identical items using jQuery Ajax

I have a situation where an ajax request is returning multiple URLs which I am using to create images like: <img URL="1" /> <img URL="1" /> <img URL="2" /> <img URL="1" /> <img URL="3" /> <img URL="2" /> and so on... ...

Counting Numbers with jQuery Animation from Zero to Percentage Value

I am currently working on a project where I aim to incorporate a jQuery Animated Number Counter, starting from zero and ending at a specified percentage value. The values of the counter are dynamically retrieved from a database. function timer() { if ...