Displaying a carousel using CSS

I have constructed a carousel using HTML, but for some reason it does not display anything once compiled.

<div class="list-offers">
  <div class="container">
   <div class="row1">
    <div class="col-xs-12 item bg_fix right" style="background-image: url(&quot;./images/bottom.jpg&quot;);">
     <img class="foto" alt="Beach" title="Beach" itemprop="image" src="./images/bottom.jpg" style="display: none;">
     <div class="col-xs-12 item ">
      <div data-ride="carousel" class="carousel slide" id="myCarousel2">
       <div class="carousel-inner">
        <div class="item  noimage">
         <h4 itemprop="name">¡consectetuer adipiscing elit!</h4>
         <p itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
       </div>
       <div class="item   noimage active">
         <h4 itemprop="name">¡consectetuer adipiscing elit!</h4>
         <p itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
       </div>
       <div class="item   noimage">
         <h4 itemprop="name">consectetuer adipiscing elit!</h4>
         <p itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
       </div>
     </div>
     <ol class="carousel-indicators">
      <li class="" data-slide-to="0" data-target="#myCarousel2"></li>
      <li data-slide-to="1" data-target="#myCarousel2" class="active"></li>
      <li data-slide-to="2" data-target="#myCarousel2" class=""></li>
    </ol>
  </div>
</div>
</div>
</div>
</div>
</div>

Could anyone provide guidance on how to modify the CSS in order to display the carousel properly? I attempted the following modifications:

.carousel-inner {
    position: relative !important;
    background-color: aqua !important;
    width: 100%;
    height: 285px !important;
    border: 3px solid #73AD21;
}

.noimage {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 480px;
    height: 10px !important;
    background-color: blue;
}
htmlcssbootstrap-4

Answer №1

Here is a carousel code example for displaying text without using the caption tag:

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
  }
  </style>
</head>
<body>

<div class="container">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="//via.placeholder.com/1200x400" alt="avatar" width="460" height="345">
      </div>

      <div class="item">
        <img src="//via.placeholder.com/1200x400" alt="avatar" width="460" height="345">
      </div>

      <div class="item">
        <img src="//via.placeholder.com/1200x400" alt="avatar" width="460" height="345">
      </div>

      <div class="item">
        <img src="//via.placeholder.com/1200x400" alt="avatar" width="460" height="345">
      </div>

    </div>

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="fa fa-angle-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="fa fa-angle-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
  }
  </style>
</body>
</html>

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

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

Having difficulty resizing the image to fit the container correctly

I am struggling to adjust the size of an image within a container. In my setup, there are two columns - the left column is fixed at 280px and the right column expands to fill the remaining space. The image is placed in the right column, but its dimensions ...

css

Is there a way to format Persian words in a Left-to-Right direction?

When attempting to write Persian words in a left-to-right format for math formulas in a textarea using HTML and CSS, I am struggling to make it work with properties like direction:ltr;. I have tried various solutions but none have fixed the issue. I have ...

htmlcsstext-direction

The <h1> element is not responding to the style attribute

Exploring HTML as a beginner has led me to an interesting issue. I've been practicing my newfound skills on W3Schools' platform and everything was running smoothly until I encountered a discrepancy in how the code is rendered on Wordpress. The s ...

htmlcss

Variation in element widths and CSS widths

While inspecting an element in FF, it displays a width of 225px. However, the applied CSS sets the width to 207px for this element. The discrepancy may be due to Bootstrap and varying resolutions. Is there a tool available to identify chang ...

csstwitter-bootstrapwidth

The placeholder string is being accepted as the input value for the number

My issue is with a form input of type number. When the form is submitted without entering any number, it treats the placeholder text "rating" as the value. How can I stop this from happening? I need to make sure that the input number field is marked as in ...

htmlformsangularangular-forms

Increase the padding on the left side of a background image

UPDATE: Solution discovered at this link thanks to Mr. Alien I am attempting to create a heading that resembles the following Title ------------------------------------------------- I have an image that I intend to use as a backdrop for it. However, I& ...

htmlcssless

Prerender is running independently of the dynamic page title and meta tags rendering process

As part of a POC, I was integrating prerender.io with an angular-node application for SEO purposes. My application can be found HERE. The good news is that all three links are being crawled successfully, as confirmed by receiving a 200 OK status for all li ...

javascripthtmlangularjsseoprerender

Guide to setting up Bootstrap in your Angular application

Currently attempting to incorporate bootstrap into my angular project. Here is the command I am inputting: npm install bootstrap jquery --save The response I receive is as follows: up to date, audited 1013 packages in 3s 92 packages are seeking fundin ...

angularbootstrap-4

How can I use CSS to conceal the controls for an HTML5 video?

Seeking advice on how to hide and show controls on an HTML5 video section. I currently have a setup where clicking on the video div opens a modal that plays the video in a larger size. The code for opening the modal and playing the video is working fine. ...

jquerycsshtmlhtml5-video

Modifying the attribute from "content-disposition:attachment" to "content-disposition:inline"

I created an HTML email signature that worked perfectly until I tested it in the Outlook Mail Client 2010, which is currently not displaying images but instead offering them as download attachments. I am utilizing DataUri for images: <img width="56" ...

htmloutlookmimeoutlook-2010multipart

What is the most appropriate unit of measurement for creating a responsive design?

I am a beginner in the world of responsive design and I'm currently figuring out how to properly layout plugins on a website when viewed on smartphones. Here's an example: @media (min-width: 568px) { .musicPlayer{ width:600px; height:320 ...

cssresponsive-designmedia-queries

What is the best way to reduce a varying percentage as the value continues to rise?

My memory of math may be a bit fuzzy, but I can't seem to recall how to solve this particular issue. In jQuery, I have been adding randomized clipping paths to my images using the following code: var max=100; var spread=5; jQuery.each( $("img"), func ...

jquerycssmath

Is there a way to remove this specific element from an inherited hyperlink?

My website can be found at whensayfeed.meteor.com. Each post on the site is enclosed within an <a></a> element. The heart symbol on the right side of each post is intended to be a "like button" that users can click on. However, because it is ...

javascripthtmlcss

Mastering the integration of Sass with NextJS

After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later: Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradie ...

cssreactjsnpmsassnext.js

Using Python and Scrapy: Identifying whether a webpage is in HTML format or not

I'm working on a Scrapy spider that needs to determine whether a page it downloads is in html format or not. The website I want the spider to crawl contains links to both pdf and html files. If the spider encounters a pdf file, it should process the r ...

pythonhtmlscrapy

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

Why is my JavaScript code running but disappearing right away?

I've encountered an issue with the code I wrote below. It's supposed to display the user's names when they enter their name, but for some reason, the names keep appearing and disappearing immediately. What could be causing this problem? Her ...

javascripthtmlfunctionreturn

premature submission alert on button press

I'm encountering an issue where my form is being submitted prematurely when I click on the button. The desired behavior is for the button to create a textarea upon clicking, allowing me to write in it before submitting by clicking the button again. Ho ...

javascripthtmlbuttonevent-listener

Problem with displaying images and videos in a lightbox gallery

Currently, I am encountering an issue with the lightbox feature on my website. When trying to play a video, there seems to be a layer (div tag) blocking it, preventing me from playing or stopping the video. This problem occurs when clicking on an image fir ...

javascriptjquerycsslightbox