Angular 8 carousel featuring a dynamic bootstrap 4 design with multiple images and cards displayed on a single slide

I am currently working on a dynamic carousel that should display multiple cards or images in one row. Initially, I faced an issue with the next and previous buttons not functioning properly when trying to display multiple cards in one row. After some online research, I managed to fix the button functionality, but now I am only able to see one image in each slide. Here is the code snippet I am using:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item" *ngFor="let data of dummyData; let i = index"
                        [ngClass]="{'active' : i == 0}">
                        <div class="row">
                            <div class="col">
                                <div class="main-card">
                                    <span class="mt-4">
                                        {{data.class}} <br>
                                        {{data.when}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

Current design with one card per row

This is what my current layout looks like.

Desired design for multiple cards per row

If anyone can point out where I may have gone wrong, I would greatly appreciate it. Thank you!

javascriptcssangulartypescriptbootstrap-4

Answer №1

My solution involved organizing data into a nested array.

  1. Retrieve data from the server
  2. Determine the screen size to decide how many images should be displayed on the carousel
  3. Send the data and the number of images in an array to the chunk method
  4. Utilize a for loop in the HTML structure

HTML

      <div class="carousel-item row  w-100  mx-3 text-center {{ i == 0 ? 'active' : '' }} m-t-0" style="margin-right: 70px;" *ngFor='let fav of userFavourite; let i = index' >
       <div  class=" d-flex justify-content-around w-100" >
       <div  class="mainSlide " style="align-content: center;" *ngFor="let x of fav;" >

          ///Enter each image from loop..etc

    </div>
    </div>
       </div>

TypeScript/Component.ts

    //retrieve image/data from the server
   getUserFavourite() {
  this._productService.getUserFavourite(this.loggedInUsername).subscribe(
  (res) => {
    if( this.scrWidth>1300){
      this.favCount=4;
    } else if(this.scrWidth<1300 && this.scrWidth>1025){
this.favCount='3';
    } else if(this.scrWidth<1025  ){
      this.favCount='2';
          }
          else if(this.scrWidth<600 ){
            this.favCount='1';
                }
    this.userFavourite = this.chunks(res,this.favCount);
    console.log(this.userFavourite);
  },
  (err) => {
    this.error = err;
  }
);
}

  /**************************************************************** */
  //determine the window screen size to adjust the number of images in an array for the carousel
  @HostListener('window:resize', ['$event'])
getScreenSize(event?) {
      this.scrHeight = window.innerHeight;
      this.scrWidth = window.innerWidth;
      console.log(this.scrHeight, this.scrWidth);
}
 /******************************************************************** */   

 //populate the array with images from the server
chunks(array, size) {
let results = [];
results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
 }

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

"Exploring the world of Typescript declarations and the CommonJS module

I'm encountering confusion while creating declaration files (d.ts). For instance, I have developed an NPM package called "a" with a single CommonJS module index.ts: export interface IPoint { x: number; y: number; } export default function s ...

typescript

Verifying numerous route paths using Vue's dynamic binding (v-bind)

Currently, I am assigning a class to an li element depending on the route path using this code snippet: <li v-bind:class="{ 'current': $route.path == '/services' }"><nuxt-link to="/services">Services</ ...

javascriptvue.jsvuejs2

"Troubleshooting: How to Fix Issues with document.getElementById on Dynamic Div

Struggling to incorporate div elements and generate graphs with Google charts? The issue arises in the draw function, where attempts to access a div element using document.getElementById() result in null values and an error message stating "container not ...

javascriptjqueryhtmlajaxgoogle-api

Navigate to link based on selected option in Bootstrap select menu

How can I make a page redirection based on the selected option value from a bootstrap select? Here is the HTML code: <select class="selectpicker"> <option value="https://example.com/">Home</option> <option value="https://exam ...

javascripttwitter-bootstrapbootstrap-select

Tips on utilizing the getElementsByClassName method in JavaScript

Check out this HTML snippet: <html> <body> <div id="wrapper"> <div id="c_wrapper"> <div class="member"> <form name="f1"> </form> </div> ...

javascripthtmldomclientscript

What is the process for eliminating transparency from the overlay feature while utilizing Dojox/Standby?

Currently, I'm using a spinner image to indicate loading while retrieving data from the backend. However, the spinner widget creates a translucent overlay over the control. Is there a way to disable this translucency so that only the spinner is visibl ...

javascriptdojo

A React component that exclusively renders component tags

After successfully loading index.html with no JavaScript errors, I ran into an issue where nothing was rendering on the page. Upon inspecting the webpage, all I could see was a tag and nothing else. It turns out that I have a component called "list". The ...

javascriptreactjs

Error: The function .join is not recognized by the sockets.io library in a Node.js client-server environment

I'm currently working on developing a chat app using node and vue js, and I've encountered an issue with the socket.io library. Specifically, I keep receiving an error stating that ".join is not a function" when trying to use it in my server-side ...

javascriptnode.jsexpresssocketssocket.io

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...

javascriptjquerycssgoogle-code-prettify

Tips for modifying the background color of all elements ahead of the element I have selected within a grid

https://i.stack.imgur.com/cW4Lp.png I'm trying to achieve a functionality where clicking on the 20th numbered block changes everything before it to light orange. I have a sandbox code snippet attached and would appreciate any guidance on what needs t ...

javascriptreactjsmaterial-uimui-x-data-grid

What is the best way to ensure that an iframe adjusts its height to fit the content within a tabbed container?

Is there a way to dynamically set the height of an iframe to match the content inside it when clicking on a tabbed plane? Initially, I used a fixed height of 1000px. How can this be achieved? <div class="container-fluid text-center"> <div ...

javascriptjqueryhtmlcssweb

The Angular directive alters the scope, however, the template continues to display the unchanged value

I am working with a directive that looks like this: .directive('myDirective', function() { return { restrict: 'AE', replace: true, templateUrl: '/myDirective.html?v=' + window.buildNumber, ...

javascriptangularjsscopeangularjs-scope

What is the best way to eliminate the content of an element using javascript/typescript?

The progress bar I'm working with looks like this: <progress class="progress is-small" value="20" max="100">20%</progress> My goal is to use javascript to remove value="20", resulting in: <progre ...

javascripttypescript

The iFrame's getFocus function does not activate

I have an iframe set up like this: <iframe name="richTextField" id="richTextField" style="border:#000 1px solid; width:700px; height:300px;"></iframe> I also have some JavaScript code that is supposed to trigger when the iframe gains or loses ...

javascriptjqueryfirefoxiframefocus

Automatically Adjust Text Size to Fit Input Forms using jQuery

Does anyone know how to use jQuery to dynamically change the font size in a form input field so that it always remains visible and fits even as the user types more text? I want the font size to start at 13px and progressively shrink as the text reaches the ...

javascriptjqueryinput

Encountered a JSON error while implementing in an ASP project

Currently, I am working with JavaScript and C# in aspnet. My goal is to pass 3 values from the Asp Page to the code behind, using the Json method. Below is how I achieve this: //initialize x, y and nome var requestParameter = { 'xx': x, 'yy ...

c#javascriptasp.netjsonpost

Utilizing Regular Expressions in Angular 4 by Referencing Patterns Stored in an Object

I'm facing an issue where my code is functional, but I keep encountering a Tslint error that's proving difficult to resolve. This particular configuration worked fine with Angular 1, but now I'm in the process of migrating the application to ...

angulartypescriptangular-cli

Files with extensions containing wildcards will trigger a 404 error when accessed from the public folder in NextJS

I have successfully set up my public folder to serve static files, however I am encountering an issue with files that have a leading dot in their filename (.**). Specifically, I need to host the "well-known" text file for apple-pay domain verification, wh ...

javascriptreactjsnext.jsstatic-filesapplepay

Exploring ways to maximize the width of responsive images on a webpage

I am currently working on a website located at . The slider image dimensions are set to 800x400, but the height appears too large. I need assistance in making the slider images responsive while maintaining their full width without sacrificing height. Ple ...

htmlcssresponsive-design

Issues with retrieving JSON data from Google Books API object

I've been working on retrieving data from the Google Books API and displaying the titles of the first 10 results on a web page. The site is successfully making the request, and I have a callback function that handles the results as shown below: funct ...

javascriptjsongoogle-books