How can the carousel item numbers be adjusted for proper display?

I'm currently working on an Angular app and have encountered a task related to displaying 5 cards using mdbootstrap. I want to showcase these cards in a carousel format, but with a twist - I only want the carousel functionality to be active on mobile screens, while all 5 cards should be visible at once on larger screens. However, no matter how small my card width is, the carousel only displays one card. Does anyone have any suggestions on how to achieve this? Thank you!

Here's the code for my cards:

 <div class="d-flex flex-column justify-content-end buttomdivheight" >
       <div class="d-flex justify-content-between" >
         <div class="d-flex flex-column align-self-end">
          <span class="bottomtoptitles assesscolor" style="font-size: 0.8em">Projects  </span>
          <span class="bottomtoptitles assesscolor" style="font-size: 0.8em">to evaluate:</span>
          <span class="bottombottomnumber assesscolorbottombackground"> 0/30</span>
         </div>
         <div  class="d-flex flex-column">
          <br>
          <span class="bottomtoptitles assesscolor">Starts in:</span>
          <span class="bottombottomnumber assesscolorbottombackground">00:00:00:00</span>
         </div>
       </div>
  </div>

For more information on carousels, please visit this link.

cssangularbootstrap-4mdbootstrap

Answer №1

For increased flexibility, consider implementing the NgPrime carousel.

Further information can be found here:

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

Having Difficulty Applying a Background Color to a Class in Bulk

I am working on a unique HTML canvas for pixel art, which is created using a table made up of various divs all sharing the "pixel" class. I want to add a clear button that can reset the entire canvas, but changing the background color of each individual di ...

javascriptcssclassbackground-color

Conceal the div on larger screens and display it on mobile devices

I have a fixed navigation bar at the top of my website. By default, it is always visible on all pages, but I want to hide it on desktop screens and display it only on mobile devices. Here is what I have implemented: @media (min-width: 992px) { #sp-he ...

javascriptjqueryhtmlcsshide

Starting a line series from the beginning of the y-axis on a bar chart using chart.js

We have a new request from the business regarding the implementation of chart.js. Take a look at the image below, which shows a combination of bar and line charts. The line chart contains only a few data points. https://i.sstatic.net/mCSlR.png Within th ...

javascriptangularchart.js

Error on the main thread in NativeScript Angular for Android has not been caught

As a beginner in the field of mobile development, I am currently exploring NativeScript and encountering an error in my Android application. https://i.stack.imgur.com/BxLqb.png You can view my package.json here ...

javascriptangularnativescriptangular2-nativescriptnativescript-angular

What's the most effective method for transferring data to different components?

How can I efficiently pass a user info object to all low-level components, even if they are grandchildren? Would using @input work or is there another method to achieve this? Here is the code for my root component: constructor(private _state: GlobalSta ...

javascriptangulartypescript

HTML formatting for text

I recently created an HTML website using Dreamweaver. I faced an issue while trying to design a section within an article using tables to incorporate both text and images. Unfortunately, the tables did not have rounded edges as I desired. I am reaching out ...

htmlcsshtml-tableformatting

Arranging the rows and columns of a table in optimal alignment

I am currently facing an issue with two tables. The first table consists of 2 rows and 4 columns, with the first column spanning 2 rows. However, in the visual representation, the last 3 columns are misaligned with the rows. How can this alignment be corre ...

htmlcsshtml-tablealignment

Showing a cell border when a radio button is chosen

I am working with a table that contains input/radio buttons, and I am trying to figure out how to apply a border to a specific cell when the user selects the radio button within it. This will give the appearance of the cell being selected. I am not sure ho ...

htmljquerycss

What is the best way to shift a link to the right within a "div" element?

I've been working on setting up a navigation menu for my website, and I'm having trouble getting the "quit" link to align to the right while keeping the other links aligned to the left. I've tried various methods but just can't seem to ...

htmlcss

Is there a restriction on the maximum size of a CSS file?

Currently, I am working on building a site using ASP.NET MVC. The CSS file that I have been working on has now grown to 88KB in size and contains over 5,000 lines of code. Recently, I have noticed that some styles that I added towards the end of the file a ...

asp.netcssasp.net-mvc

Responsiveness of a div containing various content

I am currently working with Bootstrap 4 and my HTML code looks like this: <div class="font-weight-bold col-12"> <span>Filter :</span> <input type="text" class="form-control" /> </div> Initial ...

htmlcssbootstrap-4responsive

Struggling with getting the Bootstrap Carousel to switch between slides?

I'm facing a challenge in creating a functioning carousel with Bootstrap. I've utilized a template for this purpose, but the issue lies in the slides not transitioning correctly when I click the arrow buttons to move to the next or previous slide ...

htmlbootstrap-4bootstrap-5

Ways to eliminate additional whitespace in CSS Grid styling techniques

Currently, I am utilizing material ui to establish a grid system for showcasing videos in 2 rows. While I have successfully set up the general layout, I am facing difficulty in eliminating the white space/padding between the elements. Despite trying nowrap ...

cssreactjsmaterial-ui

Find the string "s" within a div element aligned vertically, using Popper

Currently utilizing Popper from Material-UI <Popper id={"simplePopper"} open={true} style={{backgroundColor: 'red',opacity:'0.5',width:'100%',height:'100%'}}> <div style={{height:"100%", ...

javascriptcssreactjsmaterial-ui

Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

I'm working on an application where I need to highlight rows based on a count value using ngFor in Angular. After trying different approaches, I was only able to highlight the specific row based on my count. Can someone please assist me? Check out m ...

javascriptcssangulartypescriptionic3

Updating a URL parameter in Angular using programmatic methods

If I have a dynamic component that shows information about different characters in a story. Once a character is chosen, specific details will be displayed within the same component. The objective is to include both the story id and character id in the URL ...

angularangular-routing

When an image is added, it will display against a backdrop of pure white

Hey there, I have a question regarding an image on my website. I removed the background using PowerPoint, but when I upload it, there is still a white background around it. Even changing the background color doesn't remove the white outline. Any tips ...

phphtmlcss

What is the best way to ensure that text highlighting appears consistent on all browsers?

I am facing an issue with the appearance of text highlighting between Chrome and Firefox browsers. Is there a way to ensure consistency in the appearance across all browsers? a { text-decoration: none; font-weight: 900; font-size: 4vw !impo ...

css

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I ...

javascriptjqueryhtmlcss

What is the best method to modify and access imported .css files within the WordPress style.css file?

I could use some assistance with a project involving minor edits to a WordPress website. I've hit a roadblock and need some help. The style.css file in WordPress doesn't have much CSS code, but instead imports files like this: /*Animate*/ @impo ...

csswordpresstwitter-bootstrap